/* =========================================================
   BARriereberater Design System
   ========================================================= */

:root {

/* Layout */

--container: 70rem;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;

/* Colors */

--color-bg: #f6f8fc;
--color-surface: #ffffff;

--color-primary: #2f63cf;
--color-primary-hover: #1f53bf;

--color-accent: #7cc9b6;

--color-text: #1f2933;
--color-text-light: #3f4c5b;

--color-border: #e7ecf3;

/* Gradients */

--gradient-primary:
linear-gradient(
120deg,
#3a7afe,
#6aa6ff
);

--gradient-accent:
linear-gradient(
120deg,
#7cc9b6,
#9ee0d1
);

/* Shadow */

--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);

--shadow-md:
0 6px 20px rgba(0,0,0,0.06);

--shadow-lg:
0 20px 40px rgba(0,0,0,0.08);

/* Animation */

--transition: 0.18s ease;

  --icon-size: 22px;
  --icon-stroke: 2;
  --badge-radius: 14px;
  --badge-padding: 12px;

}


/* =========================================================
RESET
========================================================= */

*,
*::before,
*::after {
box-sizing:border-box;
margin:0;
padding:0;
}

body,
html {
    font-size: 1rem;
    width: 100%;
}

svg,
img {
max-width:100%;
height: auto;
display:block;
overflow: hidden;
}

ul {
list-style:none;
}

a {
text-decoration:none;
color:inherit;
}

button {
cursor: pointer;
}


/* =========================================================
BASE
========================================================= */

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/open-sans-v23-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v23-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/open-sans-v23-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v23-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {

font-family:
'Open Sans',
system-ui,
-apple-system,
Segoe UI,
Roboto,
Arial,
sans-serif;

background:var(--color-bg);
color:var(--color-text);

font-size:1.0625rem;
line-height:1.6;

-webkit-font-smoothing:antialiased;

}

main{
margin-top:80px;
}


/* =========================================================
TYPOGRAPHY
========================================================= */

h1,h2,h3{
line-height:1.25;
margin-bottom:12px;
}

h1{
font-size:2.625rem;
font-weight:700;
}

h2{
font-size:2rem;
font-weight:700;
}

h3,
.h3{
font-size:1.375rem;
font-weight:600;
}

p{
margin-bottom:16px;
color:var(--color-text-light);
font-weight: 400;
}


/* =========================================================
LAYOUT
========================================================= */

@media (max-width: 19.9375rem){
.wrapper {
  hyphens: auto;
  word-break: break-word; 
}
}

.container{

max-width:var(--container);
margin:0 auto;
padding:0 24px;

}

.section{
padding:90px 0;
position:relative;
}

.section-header{
margin-bottom:40px;
}


/* =========================================================
HEADER
========================================================= */

.site-header{
position:fixed;
top:0;
left:0;
right:0;

background:rgba(255,255,255,0.85);
backdrop-filter:blur(3px);

border-bottom:1px solid var(--color-border);

z-index:1000;

}

.header-inner{

display:flex;
align-items:center;
justify-content:space-between;

height:70px;

}


/* Logo */

.logo{

font-weight:700;
font-size:1.25rem;
line-height: 1;
color:var(--color-primary);

text-decoration: none;
display: flex;
align-items: center;
gap: 5px;

}

.logo:focus-visible {

outline: 3px solid var(--color-primary);
outline-offset: 3px;

}

.logo img{

height:32px;
width:auto;

display:block;

}


/* Navigation */

.nav{

display:flex;
gap:28px;

}

.nav a{

position:relative;
font: weight 400;
color:var(--color-text-light);
padding: 6px;

}

.nav a:hover{
color:var(--color-primary);
}

.nav a::after{

content:"";
position:absolute;

left:0;
bottom:-4px;

height:2px;
width:0;

background:var(--color-primary);

transition:width .25s;

}

@media (prefers-reduced-motion: reduce) {
  .nav a::after {
    transition: none 0s;
  }
}

.nav a:hover::after{
width:100%;
}

/* Desktop/Allgemein: nicht nervig bei Maus */
.nav a:focus { outline: none; }

.nav a:focus-visible{
  border-radius: 10px;
  /* “inner” focus ring – wird nicht weggeclippt */
  box-shadow: inset 0 0 0 3px rgba(58,122,254,0.55);
  background: rgba(58,122,254,0.10);
  color: var(--color-text);
}

/* Mobile: Fokus noch deutlicher + volle Breite */
@media (max-width: 50rem){
  .nav a:focus-visible{
    border-radius: 12px;
    box-shadow: inset 0 0 0 3px rgba(58,122,254,0.60);
    background: rgba(58,122,254,0.14);
  }
}

@media (max-width: 50rem){
  .nav a::after{ display:none; }
}

@media (max-width: 50rem){

  .site-header nav{
    position:absolute;
    top:70px;
    left:0;
    right:0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    transition: max-height .25s ease;
  }

  .nav a{
    padding: 16px 18px; /* etwas kompakter als 24px */
  }

  /* besseres Tap-Feedback */
  .nav a{
    -webkit-tap-highlight-color: rgba(58,122,254,0.18);
  }
}

.nav a{
  position:relative;
  font-weight: 400;
  color:var(--color-text-light);
}

@media (prefers-reduced-motion: reduce) {
.site-header nav {
  transition: none 0s;
}
}

/* =========================================================
HERO
========================================================= */

.hero{

padding:100px 0;

background:

radial-gradient(
circle at 10% 20%,
rgba(58,122,254,0.15),
transparent 40%
),

radial-gradient(
circle at 90% 10%,
rgba(124,201,182,0.18),
transparent 40%
),

var(--color-bg);

}

@media (max-width: 50rem){
  .hero{
    padding:40px 0 100px;
  }
}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.hero-lead{
font-size:1.1875rem;
max-width:620px;
}

.hero-cta{
display:flex;
gap:14px;
margin-top:18px;
}


/* =========================================================
BUTTONS
========================================================= */

.btn{

display:inline-block;

padding:12px 20px;

border-radius:var(--radius);

font-weight:600;

transition:var(--transition);

}

.btn-primary{

background:var(--color-primary);
color:white;

box-shadow:var(--shadow-md);

}

.btn-primary:hover{

transform:translateY(-1px);
box-shadow:var(--shadow-lg);

}

.btn-secondary{

background:white;
border:1px solid var(--color-border);

}

.btn-large{
font-size:1.05rem;
padding:14px 24px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none 0s;
  }
}


/* =========================================================
SERVICE CARDS
========================================================= */

.services-grid{

display:grid;
grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.service-card{

background:var(--color-surface);

border-radius:var(--radius-lg);

padding:30px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

border:1px solid var(--color-border);

position:relative;
overflow: hidden;

}

@media (prefers-reduced-motion: reduce) {
  .service-card {
    transition: none 0s;
  }
}

.service-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-lg);

}

.service-card::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;

height:4px;

background:var(--gradient-primary);

border-radius:var(--radius-lg) var(--radius-lg) 0 0;

}

.service-card::after{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  right: -120px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(124,201,182,0.18), transparent 70%);
  pointer-events:none;
}

.service-card h3 {
  color:var(--color-text);
}

/* =========================================================
SECTION BACKGROUND SHAPES
========================================================= */

.section-shape::before{

content:"";

position:absolute;

top:-103px;
left:0;
right:0;

height:220px;

background:
linear-gradient(
135deg,
rgba(58,122,254,0.12),
rgba(124,201,182,0.12)
);

clip-path:polygon(0 0,100% 40%,100% 100%,0 100%);

z-index:0;

}

.section-shape .container{
position:relative;
z-index:1;
}


/* =========================================================
PROBLEM / TRUST
========================================================= */

.problem{
background:#f4f7fb;
}

.trust{
background:#f8fbfa;
}

.problem-grid,
.trust-grid{

display:grid;
grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:40px;

}


/* =========================================================
CTA
========================================================= */

.cta{

text-align:center;
color:white;

background:var(--gradient-primary);

}

.cta::before{

content:"";

position:absolute;

top:-70px;
left:0;
right:0;

height:120px;

background:var(--color-bg);

clip-path:polygon(0 0,100% 100%,0 100%);

}

.cta .btn-primary{
background:white;
color:var(--color-primary);
}


/* =========================================================
CONTACT FORM
========================================================= */

.contact{
background:var(--color-bg);
}

.contact-form{

margin-top:30px;
max-width:720px;

}

.form-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:24px;

}

.form-group{
display:flex;
flex-direction:column;
}

label{
font-weight:600;
margin-bottom:6px;
}

input{

padding:11px;

border:1px solid var(--color-border);
border-radius:var(--radius-sm);

font-size:1rem;

}

input:focus{

outline:3px solid var(--color-primary);
border-color:var(--color-primary);

}


/* =========================================================
FAQ
========================================================= */

.faq-list details{

border-bottom:1px solid var(--color-border);
padding:16px 0;

}

.faq-list summary{

font-weight:600;
cursor:pointer;

}

.faq-list summary::-webkit-details-marker{
display:none;
}

.faq-list summary::after{

content:"+";
float:right;

}

.faq-list details[open] summary::after{
content:"–";
}

.faq-list p{
margin-top:10px;
max-width:700px;
}


/* =========================================================
ACCESSIBILITY HELPERS
========================================================= */

a:focus,
button:focus,
input:focus{

outline:3px solid var(--color-primary);
outline-offset:2px;

}


/* Skip link */

.skip-link{
position:absolute;
left:-9999px;
}

.skip-link:focus{

left:20px;
top:20px;

background:black;
color:white;

padding:10px;

}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width:56.25rem){

.hero-grid{
grid-template-columns:1fr;
}

.nav{
gap:18px;
}

}

@media (max-width:43.75rem){

.form-grid{
grid-template-columns:1fr;
}

.section{
padding:70px 0;
}

.hero h1{
font-size:2.125rem;
}

}

/* =========================================================
   ICONS (Feature Badges)
   ========================================================= */

.icon{
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  flex: 0 0 auto;
}

.icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* A small “material-ish” badge behind icons */
.icon-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: var(--badge-radius);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)),
    radial-gradient(circle at 30% 20%, rgba(58,122,254,0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(124,201,182,0.18), transparent 55%);

  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
}

/* subtle “playful” corner cut without clip-path dependency */
.icon-badge::after{
  content:"";
  position:absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top-right-radius: var(--badge-radius);
  background: rgba(58,122,254,0.12);
  border-left: 1px solid rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

/* Feature row layout (usable inside cards/sections) */

.feature-list {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap: 18px 28px;

margin: 30px 0 40px;
padding: 0;

}

/* =========================================================
FEATURE LIST
========================================================= */

.feature-list {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px,1fr));

gap: 22px 28px;

margin: 32px 0 44px;
padding: 0;

}

/* Feature card */

.feature {

display: flex;
align-items: center;
gap: 14px;

padding: 14px 16px;

background: var(--color-surface);
border: 1px solid var(--color-border);

border-radius: var(--radius);

box-shadow: var(--shadow-sm);

font-weight: 400;
color: var(--color-text);

}

/* Hover */

.feature:hover {

transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(58,122,254,0.25);

}

/* Icon color */

.feature .icon-badge {

color: var(--color-primary);

}

.feature:hover .icon-badge {

transform: scale(1.05);

}

.feature-text {
  width: calc(100% - 58px);
}

.icon-badge {

transition: transform .18s ease;

}

@media (prefers-reduced-motion: reduce) {
.icon-badge {
  transition: none 0s;
}
}

.hero-illustration {

display:flex;
justify-content:center;
align-items:center;

}

.hero-illustration svg{

width:100%;
max-width:480px;
height:auto;

filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));

}

@media (prefers-reduced-motion: reduce) {

.feature:hover {

transform: none;
box-shadow: var(--shadow-sm);

}

}

.seo {

background:
radial-gradient(
circle at 10% 20%,
rgba(58,122,254,0.08),
transparent 50%
),
radial-gradient(
circle at 90% 80%,
rgba(124,201,182,0.10),
transparent 50%
);

}

/* =========================================================
REVEAL ANIMATION SYSTEM
========================================================= */

.reveal {

opacity: 0;
transform: translateY(16px);

}

/* visible state */

.reveal.is-visible {

opacity: 1;
transform: translateY(0);

transition:
opacity .6s ease,
transform .6s ease;

}

/* stagger support */

.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

.reveal,
.reveal.is-visible {

opacity: 1;
transform: none;
transition: none;

}

}

/* =========================================================
CONTENT LISTS
========================================================= */

.tools-list,
.audit-list,
.service-card ul {

margin: 18px 0 10px;
padding-left: 0;

}

.tools-list li,
.audit-list li,
.service-card li {

position: relative;

padding-left: 26px;
margin-bottom: 10px;

line-height: 1.45;
color: var(--color-text-light);

}


/* default bullet */

.tools-list li::before,
.audit-list li::before {

content: "";

position: absolute;
left: 0;
top: 8px;

width: 8px;
height: 8px;

border-radius: 50%;

background: var(--color-primary);

box-shadow:
0 0 0 4px rgba(58,122,254,0.08);

}

/* =========================================================
SERVICE CARD LIST
========================================================= */

.service-card ul {

margin-top: 16px;

}

.service-card li {

padding-left: 28px;
font-size: 0.96rem;

}

.service-card li::before {

content: "✓";

position: absolute;
left: 0;
top: 0;

width: 18px;
height: 18px;

display: flex;
align-items: center;
justify-content: center;

font-size: 0.75rem;
font-weight: 700;

color: white;

background: var(--gradient-primary);

border-radius: 50%;

box-shadow: var(--shadow-sm);

}

.service-card li {

transition: transform .15s ease;

}

.service-card li:hover {

transform: translateX(3px);

}

@media (prefers-reduced-motion: reduce) {
  .service-card li {
    transition: none 0s;
  }
}

@media (max-width:43.75rem){

.tools-list li,
.audit-list li,
.service-card li {

margin-bottom: 12px;

}

}

.nav-toggle {

display: none;

background: none;
border: none;

width: 40px;
height: 40px;

cursor: pointer;

}

.nav-toggle span {

display: block;

width: 22px;
height: 2px;

background: var(--color-text);

margin: 5px auto;

transition: var(--transition);

}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span {
    transition: none 0s;
  }
}

@media (max-width: 50rem) {

.nav-toggle {
display: block;
}

/* nav container */

.site-header{
width:100%;
left:0;
right:0;
}

.site-header nav{

position: fixed;

top:70px;
left:0;
right:0;

width:100vw;

background: var(--color-surface);

border-bottom:1px solid var(--color-border);

max-height:0;
overflow:hidden;

transition:max-height .25s ease;

}

@media (prefers-reduced-motion: reduce) {
  .site-header nav {
    transition: none 0s;
  }
}

.site-header.nav-open nav{
max-height:300px;
}

/* nav list */

.site-header nav .nav{
padding:0;
}

.nav a{
padding:16px 20px;
}

.nav {

flex-direction: column;
gap: 0;

}

.nav li {

border-top: 1px solid var(--color-border);

}

.nav a {

display: block;

padding: 16px 24px;

}

}

.site-header.nav-open .nav-toggle span:nth-child(1){
transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .nav-toggle span:nth-child(2){
opacity: 0;
}

.site-header.nav-open .nav-toggle span:nth-child(3){
transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
FOOTER
========================================================= */

.site-footer {

margin-top: 80px;

background: linear-gradient(
180deg,
rgba(0,0,0,0.02),
rgba(0,0,0,0.04)
);

border-top: 1px solid var(--color-border);

padding: 50px 0 30px;

font-size: 0.95rem;

}


/* Footer Layout */

.footer-inner {

display: grid;
grid-template-columns: 1fr auto;

gap: 20px;

align-items: center;

}


/* Brand */

.footer-brand {

font-weight: 600;
color: var(--color-text);

}

.footer-brand span {

color: var(--color-text-light);

}


/* Footer nav */

.footer-nav {

display: flex;
gap: 20px;

}

.footer-nav a {

color: var(--color-text-light);

transition: color .15s ease;

}

@media (prefers-reduced-motion: reduce) {
  .footer-nav a {
    transition: none 0s;
  }
}

.footer-nav a:hover {

color: var(--color-primary);

}


/* copyright */

.footer-meta {

margin-top: 20px;

font-size: 0.85rem;
color: var(--color-text-light);

}


/* mobile */

@media (max-width: 43.75rem){

.footer-inner {

grid-template-columns: 1fr;

text-align: center;

}

.footer-nav {

justify-content: center;
flex-wrap: wrap;

}

}

/* =========================================================
LEGAL / IMPRESSUM
========================================================= */

.legal {

padding-top: 120px;

}

/* Layout */

.legal-grid {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px,1fr));

gap: 28px;
margin: 40px 0;

}

/* Card */

.legal-card {

background: var(--color-surface);

border: 1px solid var(--color-border);

border-radius: var(--radius);

padding: 28px;

box-shadow: var(--shadow-sm);

}

.legal-card-wide {

margin-top: 20px;

}

/* Headings */

.legal-card h3,
.legal-card .h3 {

margin-bottom: 12px;
font-size: 1.25rem;

}

/* Text */

.legal-card p {

margin-bottom: 14px;

line-height: 1.55;

}

/* Address formatting */

.legal-line {

display: inline-block;

}

/* Contact list */

.legal-list {

margin-top: 10px;

}

.legal-list li {

margin-bottom: 8px;

}

/* Links */

.legal a {

color: var(--color-primary);
text-decoration: underline;

}

.legal a:hover {

text-decoration: none;

}

/* Subtle muted text */

.muted {

color: var(--color-text-light);

}

/* =========================================================
READABILITY FOR LONG TEXT
========================================================= */

.legal-card-wide {

max-width: 760px;

}

/* paragraphs spacing */

.legal-card-wide p {

margin-bottom: 16px;

}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 50rem){

.legal-grid {

grid-template-columns: 1fr;

}

.legal {

padding-top: 100px;

}

}

.legal-card-wide {
max-width: 720px;
margin: auto;
}

/* =========================================================
AGB / DATENSCHUTZ
========================================================= */

.legal-card-wide h3,
.legal-card-wide .h3{

margin-top:28px;

}

.legal-card-wide h3:first-child,
.legal-card-wide .h3:first-child{

margin-top:0;

}

/* bessere Lesbarkeit für lange Texte */

.legal-card-wide{

line-height:1.6;

}

/* spacing für Listen */

.legal-card-wide ul{

margin:16px 0 20px;

}

.section-illustration{

display:flex;
justify-content:flex-start;

margin:40px 0;

position:relative;

}

.section-illustration img{

max-width:400px;
width:100%;
height:auto;

border-radius:18px;

box-shadow:
0 12px 30px rgba(0,0,0,0.08);

transition:
transform .25s ease,
box-shadow .25s ease;

transform:rotate(-1deg);

}

.section-illustration img:hover{

transform:translateY(-4px);

box-shadow:
0 20px 45px rgba(0,0,0,0.12);

}

@media (prefers-reduced-motion: reduce) {
  .section-illustration img {
    transition: none 0s;
  }
}

@media (max-width:50rem){

.section-illustration img{
max-width:300px;
}

}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-error{

color:#c0392b;
font-size:0.85rem;
margin-top:6px;

}

.form-message{

margin-bottom:20px;
font-weight:500;

}

.form-success{

background:#e8f7ef;
color:#1b5e3c;
padding:16px;
border-radius:8px;

}

.form-error-box{

background:#fdecea;
color:#7a1c1c;
padding:16px;
border-radius:8px;

}

input.input-error{

border-color:#c0392b;

}

.faq-list{

margin-top:40px;

}

.faq-item{

border-bottom:1px solid var(--color-border);

padding:4px 0;

}

.faq-item h3,
.faq-item p{

margin:0;

}

.faq-question{

width:100%;

display:flex;
align-items:center;

justify-content:space-between;

background:none;
border:none;

font:inherit;
font-weight:600;
font-size:1.05rem;

text-align:left;

padding:10px 0;

cursor:pointer;

color:var(--color-text);

}

/* Toggle icon */

.faq-question::after{

content:"+";

font-size:1.4rem;

transition:transform .25s ease;

}

@media (prefers-reduced-motion: reduce) {
  .faq-question::after {
    transition: none 0s;
  }
}

/* Open state */

.faq-question[aria-expanded="true"]::after{

content:"−";

}

/* Answer */

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

padding: 5px 0;

line-height:1.6;

color:var(--color-text-light);

}

@media (prefers-reduced-motion: reduce) {
  .faq-answer {
    transition: none 0s;
  }
}

/* hover */

.faq-question:hover{

color:var(--color-primary);

}

/* focus */

.faq-question:focus-visible{

outline:3px solid var(--color-primary);
outline-offset:3px;

}

.a11ytext {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.trust-list{

margin:16px 0 28px;
padding:0;

list-style:none;

display:grid;
gap:8px;

font-size:0.95rem;

}

.trust-list li{

position:relative;
padding-left:22px;

color:var(--color-text-light);

}

.trust-list li::before{

content:"✓";

position:absolute;
left:0;
top:0;

color:var(--color-primary);
font-weight:600;

}