.yarpp-related{margin-bottom:1em;margin-top:1em}.yarpp-related a{font-weight:700;text-decoration:none}.yarpp-related .yarpp-thumbnail-title{font-size:96%;font-weight:700;text-align:left;text-decoration:none}.yarpp-related h3{font-size:125%;font-weight:700;margin:0;padding:0 0 5px;text-transform:capitalize}#saf-tool {
--saf-navy: #17394e;
--saf-navy-dark: #102e41;
--saf-navy-light: #285b73;
--saf-teal: #087d75;
--saf-teal-dark: #07645e;
--saf-gold: #e5b45f;
--saf-ink: #203947;
--saf-muted: #516675;
--saf-border: #c9dce4;
--saf-soft: #f1f7fa;
--saf-mint: #e9f7f3;
--saf-cream: #fff7e8;
--saf-white: #ffffff;
--saf-shadow: 0 12px 35px rgba(16, 46, 65, 0.09);
width: 100%;
max-width: 100%;
min-width: 0;
margin: 26px 0 42px;
padding: 26px;
box-sizing: border-box;
color: var(--saf-ink);
background: linear-gradient(180deg, #f4f9fb 0%, #ffffff 55%);
border: 1px solid var(--saf-border);
border-radius: 20px;
box-shadow: var(--saf-shadow);
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.7;
container-name: saf-layout;
container-type: inline-size;
isolation: isolate;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
#saf-tool,
#saf-tool *,
#saf-tool *::before,
#saf-tool *::after {
box-sizing: border-box;
}
#saf-tool * {
min-width: 0;
}
#saf-tool p,
#saf-tool li,
#saf-tool label,
#saf-tool dt,
#saf-tool dd {
font-family: inherit;
font-size: 18px;
line-height: 1.7;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
#saf-tool p {
margin: 0 0 16px;
}
#saf-tool p:last-child {
margin-bottom: 0;
}
#saf-tool h2,
#saf-tool h3,
#saf-tool h4 {
max-width: 100%;
margin: 0 0 14px;
padding: 0;
font-family: inherit;
font-style: normal;
letter-spacing: -0.025em;
color: var(--saf-navy);
text-transform: none;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
#saf-tool h2 {
font-size: 34px;
line-height: 1.24;
font-weight: 750;
}
#saf-tool h3 {
font-size: 26px;
line-height: 1.3;
font-weight: 700;
}
#saf-tool h4 {
font-size: 21px;
line-height: 1.4;
font-weight: 700;
}
#saf-tool strong,
#saf-tool b {
font-weight: 700;
}
#saf-tool a,
#saf-tool a:visited {
color: #075d7c;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
overflow-wrap: anywhere;
}
#saf-tool a:hover {
color: var(--saf-teal-dark);
text-decoration-thickness: 2px;
}
#saf-tool :is(a, button, input, select, textarea, summary):focus-visible {
outline: 3px solid var(--saf-gold) !important;
outline-offset: 3px;
}
#saf-tool button,
#saf-tool input,
#saf-tool select,
#saf-tool textarea {
font-family: inherit;
}
#saf-tool ::selection {
background: #bee5e1;
color: #102e41;
} #saf-tool :is(
.saf-hero-figure,
.saf-facts,
.saf-fact,
.saf-calculator-section,
.saf-workspace,
.saf-form,
.saf-fieldset,
.saf-result,
.saf-result-primary,
.saf-result-data,
.saf-result-data-item,
.saf-result-recommendation,
.saf-result-caution,
.saf-comparison-section,
.saf-table-wrap,
.saf-method-section,
.saf-method-example,
.saf-research-section,
.saf-research-grid,
.saf-research-card,
.saf-checklist-section,
.saf-faq-section,
.saf-faq-list,
.saf-faq-item,
.saf-sources-section,
.saf-related-section,
.saf-tool-footer
) {
width: 100%;
max-width: 100%;
min-width: 0;
}
#saf-tool :is(
.saf-fact-text,
.saf-step-text,
.saf-research-card-text,
.saf-check-text,
.saf-recommendation-text,
.saf-caution-text,
.saf-source-text,
.saf-related-text
) {
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
#saf-tool :is(
.saf-calculator-section,
.saf-comparison-section,
.saf-method-section,
.saf-research-section,
.saf-checklist-section,
.saf-faq-section,
.saf-sources-section,
.saf-related-section
) {
margin-top: 32px;
} #saf-tool .saf-lead {
position: relative;
margin: 0 0 24px;
padding: 28px 30px;
color: #ffffff;
background: linear-gradient(
125deg,
#102e41 0%,
#20536b 62%,
#087d75 100%
);
border: 1px solid #285b73;
border-left: 6px solid var(--saf-gold);
border-radius: 16px;
box-shadow: 0 9px 24px rgba(16, 46, 65, 0.16);
font-size: 19px;
font-weight: 450;
line-height: 1.75;
} #saf-tool .saf-hero-figure {
margin: 0 0 24px;
padding: 20px 16px 16px;
background: #ffffff;
border: 1px solid var(--saf-border);
border-radius: 16px;
box-shadow: 0 5px 18px rgba(16, 46, 65, 0.05);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #89a8b7 #eaf1f5;
}
#saf-tool .saf-hero-svg {
display: block;
width: 760px !important;
max-width: none !important;
height: auto;
margin: 0 0 14px;
}
#saf-tool .saf-hero-figure figcaption {
display: block;
max-width: 100%;
padding-top: 13px;
color: var(--saf-muted);
border-top: 1px solid #d9e5eb;
font-size: 16px;
line-height: 1.65;
} #saf-tool .saf-facts {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 270px), 1fr)
);
gap: 15px;
margin: 0;
}
#saf-tool .saf-fact {
display: block;
padding: 21px 20px;
background: #ffffff;
border: 1px solid #cfdee5;
border-top: 5px solid var(--saf-navy-light);
border-radius: 14px;
box-shadow: 0 4px 14px rgba(16, 46, 65, 0.05);
}
#saf-tool .saf-fact-birth {
border-top-color: #326b9c;
}
#saf-tool .saf-fact-marriage {
border-top-color: #557f9c;
}
#saf-tool .saf-fact-death {
border-top-color: var(--saf-teal);
}
#saf-tool .saf-fact-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
#saf-tool .saf-fact-number {
display: block;
color: var(--saf-navy);
font-size: 31px;
font-weight: 800;
line-height: 1.2;
}
#saf-tool .saf-fact-text strong {
display: block;
color: var(--saf-ink);
font-size: 18px;
line-height: 1.45;
}
#saf-tool .saf-fact-text > span:last-child {
display: block;
color: var(--saf-muted);
font-size: 16px;
line-height: 1.55;
} #saf-tool .saf-section-heading {
max-width: 100%;
margin: 0 0 23px;
padding: 0 0 17px;
border-bottom: 2px solid #d8e6eb;
}
#saf-tool .saf-section-heading h2 {
margin: 8px 0 12px;
}
#saf-tool .saf-section-heading p {
max-width: 100%;
color: var(--saf-muted);
font-size: 18px;
line-height: 1.7;
}
#saf-tool .saf-eyebrow {
display: inline-block;
max-width: 100%;
padding: 6px 12px;
background: #dff1ed;
border: 1px solid #bbdfd8;
border-radius: 7px;
color: #07564f;
font-size: 15.5px;
font-weight: 750;
line-height: 1.4;
letter-spacing: 0.035em;
} #saf-tool .saf-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px;
align-items: start;
}
#saf-tool .saf-form {
display: block;
margin: 0;
padding: 23px;
background: #ffffff;
border: 2px solid #aecbd5;
border-radius: 16px;
box-shadow: 0 7px 20px rgba(16, 46, 65, 0.06);
}
#saf-tool .saf-fieldset {
display: block;
margin: 0;
padding: 22px;
border: 1px solid #c9dce4;
border-radius: 13px;
background: #f3f8fa;
}
#saf-tool .saf-fieldset legend {
display: table;
width: auto;
max-width: 100%;
margin: 0 0 4px;
padding: 7px 14px;
color: #ffffff;
background: var(--saf-navy);
border: 0;
border-radius: 7px;
font-size: 19px;
font-weight: 750;
line-height: 1.45;
}
#saf-tool .saf-field {
display: block;
max-width: 100%;
margin-bottom: 23px;
}
#saf-tool .saf-field:last-child {
margin-bottom: 0;
}
#saf-tool .saf-field label {
display: block;
margin: 0 0 9px;
color: var(--saf-navy);
font-size: 18px;
font-weight: 750;
line-height: 1.5;
}
#saf-tool :is(input, select, textarea) {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 50px;
margin: 0;
padding: 11px 14px;
color: #17394e;
background: #ffffff !important;
border: 2px solid #9fbcc9 !important;
border-radius: 9px;
font-size: 18px !important;
font-weight: 500;
line-height: 1.5;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#saf-tool select {
padding-right: 36px;
cursor: pointer;
text-overflow: ellipsis;
}
#saf-tool textarea {
min-height: 100px;
resize: vertical;
}
#saf-tool :is(input, select, textarea):hover {
border-color: #538b9f !important;
}
#saf-tool :is(input, select, textarea):focus {
border-color: var(--saf-teal) !important;
box-shadow: 0 0 0 3px rgba(8, 125, 117, 0.13);
}
#saf-tool :is(input, select, textarea):disabled {
background: #edf2f4 !important;
color: #576b77;
cursor: not-allowed;
}
#saf-tool .saf-field-help {
margin: 9px 0 0;
color: var(--saf-muted);
font-size: 16px;
line-height: 1.65;
} #saf-tool .saf-form-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 21px 0 17px;
}
#saf-tool button {
min-height: 49px;
max-width: 100%;
margin: 0;
padding: 12px 19px;
border: 2px solid transparent;
border-radius: 9px;
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: 0;
text-align: center;
text-transform: none;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
#saf-tool .saf-form-actions .saf-button {
flex: 1 1 230px;
width: auto;
white-space: normal;
}
#saf-tool .saf-button-primary {
color: #ffffff !important;
background: var(--saf-teal) !important;
border-color: var(--saf-teal) !important;
box-shadow: 0 4px 12px rgba(8, 125, 117, 0.17);
}
#saf-tool .saf-button-primary:hover:not(:disabled) {
background: var(--saf-teal-dark) !important;
border-color: var(--saf-teal-dark) !important;
}
#saf-tool .saf-button-secondary {
color: var(--saf-navy) !important;
background: #ffffff !important;
border-color: #8bafbe !important;
}
#saf-tool .saf-button-secondary:hover:not(:disabled) {
background: #e9f3f7 !important;
border-color: var(--saf-navy-light) !important;
}
#saf-tool button:disabled {
opacity: 0.65;
cursor: not-allowed;
box-shadow: none;
}
#saf-tool .saf-form-note {
margin: 0;
color: var(--saf-muted);
font-size: 16px;
line-height: 1.65;
}
#saf-tool .saf-form-error {
margin: 12px 0 0;
padding: 12px 15px;
color: #8d292e;
background: #fff0f0;
border: 1px solid #e8bbbb;
border-left: 4px solid #a52c37;
border-radius: 8px;
font-size: 16px;
line-height: 1.55;
}
#saf-tool .saf-form-error:empty {
display: none;
}
#saf-tool .saf-noscript {
margin-top: 15px;
padding: 14px 16px;
color: #674818;
background: var(--saf-cream);
border: 1px solid #ead39c;
border-radius: 8px;
font-size: 16px;
line-height: 1.6;
} #saf-tool .saf-result {
display: block;
margin: 0;
padding: 24px;
color: #ffffff;
background: linear-gradient(
145deg,
#102e41 0%,
#17485c 100%
);
border: 2px solid #20536b;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(16, 46, 65, 0.12);
}
#saf-tool .saf-result-header {
max-width: 100%;
margin-bottom: 19px;
}
#saf-tool .saf-result-header .saf-eyebrow {
color: #123d42;
background: #ccece7;
border-color: #a8dcd5;
}
#saf-tool .saf-result-header h2 {
margin: 12px 0;
color: #ffffff;
font-size: 32px;
}
#saf-tool .saf-result-header p {
color: #e1edf2;
font-size: 18px;
line-height: 1.65;
}
#saf-tool .saf-result-primary {
display: block;
margin: 0 0 18px;
padding: 23px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(220, 242, 244, 0.25);
border-left: 5px solid var(--saf-gold);
border-radius: 12px;
}
#saf-tool .saf-result-label {
display: block;
margin-bottom: 9px;
color: #d7ebf1;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
}
#saf-tool .saf-result-status {
margin: 0 0 12px;
color: #ffffff;
font-size: 27px;
font-weight: 800;
line-height: 1.32;
overflow-wrap: break-word;
word-break: normal;
}
#saf-tool .saf-result-primary #saf-result-summary {
margin: 0;
color: #f0f6f8;
font-size: 18px;
line-height: 1.7;
} #saf-tool .saf-result-data {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin: 0 0 18px;
padding: 0;
}
#saf-tool .saf-result-data-item {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
margin: 0;
padding: 17px 19px;
background: #ffffff;
border: 1px solid #d3e4e9;
border-radius: 10px;
color: var(--saf-ink);
}
#saf-tool .saf-result-data dt {
display: block;
margin: 0;
padding: 0;
color: var(--saf-muted);
font-size: 16px;
font-weight: 650;
line-height: 1.5;
}
#saf-tool .saf-result-data dd {
display: block;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
color: var(--saf-navy);
font-size: 21px;
font-weight: 800;
line-height: 1.45;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
white-space: normal;
}
#saf-tool .saf-result-data output,
#saf-tool .saf-result-data time {
display: inline;
max-width: 100%;
color: var(--saf-navy);
font-size: 21px;
font-weight: 800;
line-height: 1.45;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
} #saf-tool .saf-result-recommendation {
display: block;
margin: 0 0 15px;
padding: 20px;
color: #194d45;
background: #e4f6ef;
border: 1px solid #a9d7c8;
border-left: 5px solid var(--saf-teal);
border-radius: 11px;
}
#saf-tool .saf-result-recommendation h3 {
color: #15534a;
font-size: 24px;
line-height: 1.35;
}
#saf-tool .saf-result-recommendation p {
color: #254b45;
font-size: 18px;
line-height: 1.7;
}
#saf-tool .saf-result-caution {
display: block;
margin: 0;
padding: 20px;
color: #624817;
background: #fff4dc;
border: 1px solid #dfc992;
border-left: 5px solid #ad7728;
border-radius: 11px;
}
#saf-tool .saf-caution-text strong {
display: block;
margin-bottom: 9px;
color: #664711;
font-size: 18px;
line-height: 1.5;
}
#saf-tool .saf-caution-text p {
color: #614e2c;
font-size: 17px;
line-height: 1.7;
}
#saf-tool .saf-announcement {
margin: 15px 0 0;
padding: 11px 14px;
color: #e1edf2;
background: rgba(255, 255, 255, 0.07);
border-radius: 8px;
font-size: 16px;
line-height: 1.6;
} #saf-tool .saf-table-wrap {
display: block;
margin: 0;
padding: 0;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: #8aabb9 #edf4f7;
}
#saf-tool .saf-comparison-table {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
background: transparent;
font-size: 17px;
line-height: 1.6;
}
#saf-tool .saf-comparison-table caption {
display: block;
width: 100%;
margin: 0 0 14px;
padding: 0;
color: var(--saf-navy);
font-size: 18px;
font-weight: 750;
line-height: 1.5;
text-align: left;
}
#saf-tool .saf-comparison-table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
#saf-tool .saf-comparison-table tbody {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 13px;
width: 100%;
}
#saf-tool .saf-comparison-table tbody tr {
display: block;
width: 100%;
min-width: 0;
margin: 0;
background: #ffffff;
border: 1px solid #c9dce4;
border-radius: 12px;
box-shadow: 0 4px 13px rgba(16, 46, 65, 0.05);
}
#saf-tool .saf-comparison-table tbody th {
display: block;
width: 100%;
margin: 0;
padding: 15px 17px;
color: #ffffff;
background: var(--saf-navy);
border: 0;
border-radius: 11px 11px 0 0;
font-size: 18px;
font-weight: 750;
line-height: 1.5;
text-align: left;
overflow-wrap: break-word;
word-break: normal;
}
#saf-tool .saf-comparison-table tbody td {
display: block;
width: 100%;
margin: 0;
padding: 12px 17px;
color: var(--saf-ink);
background: transparent;
border: 0;
border-top: 1px solid #e3edf1;
font-size: 17px;
font-weight: 650;
line-height: 1.55;
text-align: left;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
#saf-tool .saf-comparison-table tbody td::before {
display: block;
margin-bottom: 3px;
color: var(--saf-muted);
font-size: 15.5px;
font-weight: 650;
line-height: 1.45;
}
#saf-tool .saf-comparison-table tbody td:nth-child(2)::before {
content: "Gesetzliche Frist";
}
#saf-tool .saf-comparison-table tbody td:nth-child(3)::before {
content: "Fristende";
}
#saf-tool .saf-comparison-table tbody td:nth-child(4)::before {
content: "Archivrecht ab";
}
#saf-tool .saf-table-note {
margin: 16px 0 0;
padding: 15px 17px;
color: #385b68;
background: #eaf4f7;
border-left: 4px solid #52879a;
border-radius: 8px;
font-size: 16px;
line-height: 1.7;
} #saf-tool .saf-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 13px;
margin: 0 0 21px;
padding: 0;
list-style: none;
}
#saf-tool .saf-step {
display: grid;
grid-template-columns: 43px minmax(0, 1fr);
gap: 15px;
align-items: start;
margin: 0;
padding: 20px;
background: #ffffff;
border: 1px solid var(--saf-border);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(16, 46, 65, 0.04);
}
#saf-tool .saf-step-number {
display: flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
color: #ffffff;
background: var(--saf-teal);
border-radius: 11px;
font-size: 19px;
font-weight: 800;
line-height: 1;
}
#saf-tool .saf-step-text h3 {
margin: 0 0 8px;
font-size: 23px;
}
#saf-tool .saf-step-text p {
color: var(--saf-muted);
font-size: 18px;
line-height: 1.7;
} #saf-tool .saf-method-example {
display: block;
padding: 23px;
background: linear-gradient(135deg, #e9f7f3, #f7fbf9);
border: 1px solid #b8dcd4;
border-left: 5px solid var(--saf-teal);
border-radius: 14px;
}
#saf-tool .saf-method-example h3 {
margin-bottom: 17px;
color: #16544e;
font-size: 24px;
}
#saf-tool .saf-example-data {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin: 0 0 17px;
padding: 0;
}
#saf-tool .saf-example-data > div {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
margin: 0;
padding: 13px 15px;
background: #ffffff;
border: 1px solid #c7e1da;
border-radius: 9px;
}
#saf-tool .saf-example-data dt {
margin: 0;
color: var(--saf-muted);
font-size: 16px;
font-weight: 650;
line-height: 1.5;
}
#saf-tool .saf-example-data dd {
margin: 0;
color: var(--saf-navy);
font-size: 20px;
font-weight: 800;
line-height: 1.45;
overflow-wrap: break-word;
word-break: normal;
}
#saf-tool .saf-method-example > p {
color: #31574f;
font-size: 18px;
line-height: 1.7;
} #saf-tool .saf-research-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 310px), 1fr)
);
gap: 16px;
}
#saf-tool .saf-research-card {
display: block;
margin: 0;
padding: 23px;
background: #ffffff;
border: 1px solid var(--saf-border);
border-top: 5px solid var(--saf-navy-light);
border-radius: 13px;
box-shadow: 0 5px 17px rgba(16, 46, 65, 0.05);
}
#saf-tool .saf-research-card:nth-child(2) {
border-top-color: var(--saf-teal);
}
#saf-tool .saf-research-card:nth-child(3) {
border-top-color: #bb8a42;
}
#saf-tool .saf-research-card h3 {
margin-bottom: 12px;
font-size: 24px;
}
#saf-tool .saf-research-card p {
color: var(--saf-muted);
font-size: 18px;
line-height: 1.7;
} #saf-tool .saf-checklist-section {
padding: 23px;
background: #f0f8f5;
border: 1px solid #bfded3;
border-radius: 15px;
}
#saf-tool .saf-checklist {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 11px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
#saf-tool .saf-checklist li {
display: grid;
grid-template-columns: 29px minmax(0, 1fr);
gap: 13px;
align-items: start;
margin: 0;
padding: 15px;
background: #ffffff;
border: 1px solid #c8e2d8;
border-radius: 10px;
}
#saf-tool .saf-check-icon {
display: flex;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
margin-top: 2px;
color: #ffffff;
background: #087d75;
border-radius: 50%;
font-size: 17px;
font-weight: 800;
line-height: 1;
}
#saf-tool .saf-check-text {
display: flex;
flex-direction: column;
gap: 4px;
}
#saf-tool .saf-check-text strong {
display: block;
color: var(--saf-navy);
font-size: 18px;
line-height: 1.45;
}
#saf-tool .saf-check-text > span {
display: block;
color: var(--saf-muted);
font-size: 17px;
line-height: 1.65;
} #saf-tool .saf-faq-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#saf-tool .saf-faq-item {
display: block;
margin: 0;
background: #ffffff;
border: 1px solid #c9dce4;
border-radius: 11px;
box-shadow: 0 3px 12px rgba(16, 46, 65, 0.04);
}
#saf-tool .saf-faq-item summary {
position: relative;
display: block;
min-height: 58px;
padding: 17px 52px 17px 19px;
color: var(--saf-navy);
background: #f1f7fa;
border-radius: 10px;
font-size: 18px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
list-style: none;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
#saf-tool .saf-faq-item summary::-webkit-details-marker {
display: none;
}
#saf-tool .saf-faq-item summary::after {
content: "+";
position: absolute;
top: 50%;
right: 17px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
color: #ffffff;
background: var(--saf-teal);
border-radius: 7px;
font-size: 22px;
font-weight: 700;
line-height: 1;
}
#saf-tool .saf-faq-item[open] {
border-color: #80b8b0;
}
#saf-tool .saf-faq-item[open] summary {
color: #ffffff;
background: var(--saf-navy);
border-radius: 10px 10px 0 0;
}
#saf-tool .saf-faq-item[open] summary::after {
content: "−";
color: var(--saf-navy);
background: #d8f1e9;
}
#saf-tool .saf-faq-item summary:hover {
background: #e4f1f4;
}
#saf-tool .saf-faq-item[open] summary:hover {
background: #204a60;
}
#saf-tool .saf-faq-answer {
padding: 19px 21px 22px;
border-top: 1px solid #d6e5e9;
}
#saf-tool .saf-faq-answer p {
color: var(--saf-ink);
font-size: 18px;
line-height: 1.75;
} #saf-tool .saf-sources-section {
padding: 23px;
background: #edf5f8;
border: 1px solid #c8dae4;
border-radius: 15px;
}
#saf-tool .saf-source-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin: 20px 0;
padding: 0;
list-style: none;
}
#saf-tool .saf-source-list li {
display: block;
margin: 0;
padding: 17px 19px;
background: #ffffff;
border: 1px solid #d0e0e7;
border-left: 4px solid var(--saf-navy-light);
border-radius: 9px;
}
#saf-tool .saf-source-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
#saf-tool .saf-source-text strong {
color: var(--saf-navy);
font-size: 18px;
line-height: 1.5;
}
#saf-tool .saf-source-text span {
color: var(--saf-muted);
font-size: 17px;
line-height: 1.65;
}
#saf-tool .saf-source-text a {
display: inline-block;
margin-top: 4px;
color: #075d7c;
font-size: 17px;
font-weight: 700;
line-height: 1.55;
}
#saf-tool .saf-source-note {
padding: 13px 15px;
color: #465d68;
background: #ffffff;
border: 1px solid #d1e2e8;
border-radius: 8px;
font-size: 16px;
line-height: 1.7;
} #saf-tool .saf-related-section {
padding: 23px;
background: linear-gradient(135deg, #eaf7f2, #f4fafb);
border: 1px solid #bcded5;
border-radius: 15px;
}
#saf-tool .saf-related-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
#saf-tool .saf-related-list li {
display: block;
margin: 0;
padding: 18px 20px;
background: #ffffff;
border: 1px solid #cce1da;
border-left: 4px solid var(--saf-teal);
border-radius: 9px;
}
#saf-tool .saf-related-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
#saf-tool .saf-related-text strong {
color: var(--saf-navy);
font-size: 18px;
line-height: 1.5;
}
#saf-tool .saf-related-text span {
color: var(--saf-muted);
font-size: 17px;
line-height: 1.65;
}
#saf-tool .saf-related-text a {
display: inline-block;
margin-top: 4px;
color: #075d7c;
font-size: 17px;
font-weight: 700;
line-height: 1.55;
} #saf-tool .saf-tool-footer {
display: block;
margin-top: 28px;
padding: 20px 22px;
color: #e8f1f5;
background: var(--saf-navy-dark);
border: 1px solid #31566a;
border-left: 5px solid var(--saf-gold);
border-radius: 12px;
}
#saf-tool .saf-tool-footer p {
margin: 0;
color: #e8f1f5;
font-size: 16px;
line-height: 1.7;
}
#saf-tool .saf-tool-footer strong {
color: #ffffff;
font-size: 16px;
} #saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 20px 0 !important;
padding: 19px 21px !important;
color: #203947 !important;
background: #ffffff !important;
border: 2px solid #a8c7d4 !important;
border-radius: 12px !important;
box-shadow: 0 5px 17px rgba(16, 46, 65, 0.07);
font-family: inherit;
font-size: 17px !important;
line-height: 1.65;
}
#saf-tool .lwptoc .lwptoc_i {
max-width: 100%;
padding: 0;
color: #203947 !important;
background: transparent !important;
}
#saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) :is(
p,
li,
span,
.ez-toc-title,
.toc_title,
.lwptoc_title
) {
color: #203947 !important;
font-size: 17px !important;
line-height: 1.65;
}
#saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) :is(a, a:visited) {
color: #075d7c !important;
background: transparent !important;
font-size: 17px !important;
font-weight: 650;
line-height: 1.6;
text-decoration: underline !important;
text-decoration-thickness: 1.5px !important;
text-underline-offset: 3px;
}
#saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) a:hover {
color: #07564f !important;
text-decoration-thickness: 2px !important;
}
#saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) a:focus-visible {
color: #102e41 !important;
background: #ffedbd !important;
outline: 3px solid #b57b19 !important;
outline-offset: 3px;
}
#saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) :is(ul, ol) {
max-width: 100%;
margin: 9px 0 9px 15px;
padding-left: 16px;
} @container saf-layout (min-width: 780px) {
#saf-tool .saf-comparison-table {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #ffffff;
border: 1px solid #c9dce4;
border-radius: 12px;
}
#saf-tool .saf-comparison-table caption {
display: table-caption;
caption-side: top;
}
#saf-tool .saf-comparison-table thead {
position: static;
display: table-header-group;
width: auto;
height: auto;
margin: 0;
padding: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
#saf-tool .saf-comparison-table thead tr {
display: table-row;
}
#saf-tool .saf-comparison-table thead th {
display: table-cell;
padding: 16px 13px;
color: #ffffff;
background: var(--saf-navy);
border: 0;
font-size: 16px;
font-weight: 750;
line-height: 1.5;
text-align: left;
vertical-align: top;
}
#saf-tool .saf-comparison-table tbody {
display: table-row-group;
}
#saf-tool .saf-comparison-table tbody tr {
display: table-row;
width: auto;
background: #ffffff;
border: 0;
border-radius: 0;
box-shadow: none;
}
#saf-tool .saf-comparison-table tbody tr:nth-child(even) {
background: #f1f7f9;
}
#saf-tool .saf-comparison-table tbody th {
display: table-cell;
width: 38%;
padding: 15px 13px;
color: var(--saf-navy);
background: transparent;
border: 0;
border-bottom: 1px solid #dce7eb;
border-radius: 0;
font-size: 17px;
font-weight: 750;
vertical-align: top;
}
#saf-tool .saf-comparison-table tbody td {
display: table-cell;
width: auto;
padding: 15px 13px;
color: var(--saf-ink);
background: transparent;
border: 0;
border-bottom: 1px solid #dce7eb;
font-size: 16px;
font-weight: 600;
line-height: 1.55;
vertical-align: top;
}
#saf-tool .saf-comparison-table tbody td::before {
display: none;
content: none;
}
} @media (max-width: 900px) {
#saf-tool {
padding: 21px;
font-size: 17px;
}
#saf-tool p,
#saf-tool li,
#saf-tool label,
#saf-tool dt,
#saf-tool dd {
font-size: 17px;
}
#saf-tool h2 {
font-size: 30px;
}
#saf-tool h3 {
font-size: 24px;
}
#saf-tool h4 {
font-size: 21px;
}
#saf-tool .saf-lead {
padding: 24px;
font-size: 18px;
}
#saf-tool .saf-section-heading p,
#saf-tool .saf-step-text p,
#saf-tool .saf-research-card p,
#saf-tool .saf-faq-answer p,
#saf-tool .saf-method-example > p,
#saf-tool .saf-result-header p,
#saf-tool .saf-result-primary #saf-result-summary,
#saf-tool .saf-result-recommendation p {
font-size: 17px;
}
#saf-tool .saf-field label,
#saf-tool .saf-fact-text strong,
#saf-tool .saf-check-text strong,
#saf-tool .saf-source-text strong,
#saf-tool .saf-related-text strong,
#saf-tool .saf-caution-text strong {
font-size: 17px;
}
#saf-tool :is(input, select, textarea) {
font-size: 17px !important;
}
#saf-tool button {
font-size: 17px;
}
#saf-tool .saf-faq-item summary {
font-size: 17px;
}
#saf-tool .saf-research-card h3,
#saf-tool .saf-method-example h3,
#saf-tool .saf-result-recommendation h3,
#saf-tool .saf-step-text h3 {
font-size: 23px;
}
#saf-tool .saf-result-header h2 {
font-size: 30px;
}
#saf-tool .saf-result-status {
font-size: 25px;
}
#saf-tool .saf-result-data dd,
#saf-tool .saf-result-data output,
#saf-tool .saf-result-data time {
font-size: 20px;
}
#saf-tool .saf-example-data dd {
font-size: 20px;
}
#saf-tool .saf-field-help,
#saf-tool .saf-form-note,
#saf-tool .saf-result-label,
#saf-tool .saf-result-data dt,
#saf-tool .saf-example-data dt,
#saf-tool .saf-table-note,
#saf-tool .saf-source-note,
#saf-tool .saf-tool-footer p,
#saf-tool .saf-tool-footer strong {
font-size: 16px;
}
} @media (max-width: 640px) {
#saf-tool {
margin: 18px 0 30px;
padding: 15px;
border-radius: 15px;
font-size: 16px;
}
#saf-tool p,
#saf-tool li,
#saf-tool label,
#saf-tool dt,
#saf-tool dd {
font-size: 16px;
line-height: 1.7;
}
#saf-tool h2 {
font-size: 27px;
line-height: 1.3;
}
#saf-tool h3 {
font-size: 22px;
line-height: 1.35;
}
#saf-tool h4 {
font-size: 20px;
}
#saf-tool .saf-lead {
padding: 20px 17px;
border-left-width: 5px;
border-radius: 12px;
font-size: 17px;
line-height: 1.7;
}
#saf-tool .saf-hero-figure {
padding: 12px;
}
#saf-tool .saf-hero-figure figcaption {
font-size: 16px;
}
#saf-tool .saf-facts,
#saf-tool .saf-research-grid {
grid-template-columns: minmax(0, 1fr);
}
#saf-tool .saf-fact {
padding: 18px;
}
#saf-tool .saf-fact-number {
font-size: 28px;
}
#saf-tool .saf-fact-text strong {
font-size: 17px;
}
#saf-tool .saf-section-heading p {
font-size: 16px;
}
#saf-tool .saf-form,
#saf-tool .saf-result {
padding: 17px;
border-radius: 12px;
}
#saf-tool .saf-fieldset {
padding: 17px 14px;
}
#saf-tool .saf-fieldset legend {
font-size: 17px;
}
#saf-tool .saf-field label {
font-size: 16px;
}
#saf-tool :is(input, select, textarea) {
min-height: 49px;
padding: 10px 12px;
font-size: 16px !important;
}
#saf-tool .saf-field-help,
#saf-tool .saf-form-note {
font-size: 16px;
}
#saf-tool .saf-form-actions {
display: flex;
flex-direction: column;
align-items: stretch;
}
#saf-tool .saf-form-actions .saf-button {
flex: 0 0 auto;
width: 100%;
min-height: 49px;
font-size: 16px;
}
#saf-tool .saf-result-header h2 {
font-size: 27px;
}
#saf-tool .saf-result-header p,
#saf-tool .saf-result-primary #saf-result-summary {
font-size: 16px;
}
#saf-tool .saf-result-primary {
padding: 17px;
}
#saf-tool .saf-result-status {
font-size: 23px;
}
#saf-tool .saf-result-data {
grid-template-columns: minmax(0, 1fr);
}
#saf-tool .saf-result-data-item {
grid-template-columns: minmax(0, 1fr);
padding: 15px;
}
#saf-tool .saf-result-data dd,
#saf-tool .saf-result-data output,
#saf-tool .saf-result-data time {
font-size: 19px;
}
#saf-tool .saf-result-recommendation,
#saf-tool .saf-result-caution {
padding: 17px;
}
#saf-tool .saf-result-recommendation h3 {
font-size: 21px;
}
#saf-tool .saf-result-recommendation p,
#saf-tool .saf-caution-text p {
font-size: 16px;
}
#saf-tool .saf-step {
grid-template-columns: 35px minmax(0, 1fr);
gap: 12px;
padding: 16px;
}
#saf-tool .saf-step-number {
width: 35px;
height: 35px;
font-size: 17px;
}
#saf-tool .saf-step-text h3 {
font-size: 21px;
}
#saf-tool .saf-step-text p {
font-size: 16px;
}
#saf-tool .saf-method-example,
#saf-tool .saf-checklist-section,
#saf-tool .saf-sources-section,
#saf-tool .saf-related-section {
padding: 17px;
}
#saf-tool .saf-method-example h3,
#saf-tool .saf-research-card h3 {
font-size: 21px;
}
#saf-tool .saf-example-data dd {
font-size: 19px;
}
#saf-tool .saf-method-example > p,
#saf-tool .saf-research-card p {
font-size: 16px;
}
#saf-tool .saf-research-card {
padding: 18px;
}
#saf-tool .saf-checklist li {
grid-template-columns: 26px minmax(0, 1fr);
gap: 11px;
padding: 13px;
}
#saf-tool .saf-check-icon {
width: 26px;
height: 26px;
font-size: 16px;
}
#saf-tool .saf-check-text strong,
#saf-tool .saf-check-text > span {
font-size: 16px;
}
#saf-tool .saf-faq-item summary {
min-height: 54px;
padding: 15px 47px 15px 15px;
font-size: 16px;
}
#saf-tool .saf-faq-answer {
padding: 17px;
}
#saf-tool .saf-faq-answer p {
font-size: 16px;
}
#saf-tool .saf-source-list li,
#saf-tool .saf-related-list li {
padding: 15px;
}
#saf-tool .saf-source-text strong,
#saf-tool .saf-source-text span,
#saf-tool .saf-source-text a,
#saf-tool .saf-related-text strong,
#saf-tool .saf-related-text span,
#saf-tool .saf-related-text a {
font-size: 16px;
}
#saf-tool .saf-tool-footer {
padding: 17px;
}
#saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) {
padding: 16px !important;
font-size: 16px !important;
}
#saf-tool :is(
#toc_container,
.toc_container,
#ez-toc-container,
.ez-toc-container,
.lwptoc,
.rank-math-toc,
.wp-block-rank-math-toc-block
) :is(p, li, span, a, .ez-toc-title, .toc_title, .lwptoc_title) {
font-size: 16px !important;
}
} @media (prefers-reduced-motion: reduce) {
#saf-tool button,
#saf-tool input,
#saf-tool select,
#saf-tool textarea {
transition: none;
}
}