/***********************************/
/* Universeller FAQ-Bereich        */
/***********************************/

.faq,
.faq * {
box-sizing: border-box;
}

.faq {
--faq-dark: #2a4a8d;
--faq-blue: #2d95d8;
--faq-text: #17324d;
--faq-muted: #526579;
--faq-border: #d7e3ee;
--faq-border-open: #9fc2df;
--faq-focus: #0a58ca;
--faq-question-open: #0d4f84;

width: 100%;
max-width: 100%;
margin: 32px 0 28px;

color: var(--faq-text);
font-family:
"Roboto",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
Helvetica,
sans-serif;

/*
* Überschreibt gegebenenfalls einen globalen Blocksatz
* des übergeordneten Inhaltsbereichs.
*/
text-align: left;
}


/***********************************/
/* Kopfbereich                     */
/***********************************/

.faq__header {
padding: 20px 22px;

color: #fff;
background-color: var(--faq-dark);
background-image:
radial-gradient(
circle at 92% 12%,
rgba(255, 255, 255, 0.22) 0,
rgba(255, 255, 255, 0) 34%
),
linear-gradient(
135deg,
var(--faq-dark) 0%,
var(--faq-blue) 100%
);

border: 1px solid rgba(20, 61, 109, 0.28);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(24, 66, 112, 0.14);
}

.faq__eyebrow {
margin: 0 0 6px;
padding: 0;

color: rgba(255, 255, 255, 0.78);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.12em;
text-align: left;
text-transform: uppercase;
}

.faq__title {
margin: 0;
padding: 0;

color: #fff;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}

.faq__lead {
max-width: 54ch;
margin: 8px 0 0;
padding: 0;

color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.5;
text-align: left;
}


/***********************************/
/* FAQ-Liste                       */
/***********************************/

.faq__list {
display: grid;
gap: 10px;

margin: 12px 0 0;
padding: 0;
}


/***********************************/
/* Einzelner FAQ-Eintrag           */
/***********************************/

.faq__item {
margin: 0;
padding: 0;
overflow: hidden;

background: #fff;
border: 1px solid var(--faq-border);
border-radius: 12px;
box-shadow: 0 3px 12px rgba(25, 61, 98, 0.06);

transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.faq__item[open] {
border-color: var(--faq-border-open);
box-shadow: 0 6px 18px rgba(25, 61, 98, 0.1);
}


/***********************************/
/* Anklickbare Frage               */
/***********************************/

.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;

min-height: 56px;
margin: 0;
padding: 14px 16px;

color: var(--faq-text);
background: #fff;
cursor: pointer;
list-style: none;

font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
text-align: left;

touch-action: manipulation;
user-select: none;

transition:
color 0.2s ease,
background-color 0.2s ease;
}

/*
* Der Text darf schrumpfen und umbrechen.
* Das Symbol behält seine feste Größe.
*/
.faq__question > span:first-child {
min-width: 0;
}

/* Browser-eigenes Details-Symbol entfernen. */
.faq__question::-webkit-details-marker {
display: none;
}

.faq__question::marker {
content: "";
}

/* Deutlich sichtbarer Fokus für Tastaturbedienung. */
.faq__question:focus-visible {
position: relative;
z-index: 1;

outline: 3px solid var(--faq-focus);
outline-offset: -3px;
border-radius: 11px;
}

.faq__item[open] > .faq__question {
color: var(--faq-question-open);
background-color: #f1f7fb;
border-bottom: 1px solid #dce8f1;
}


/***********************************/
/* Plus-/Minus-Symbol              */
/***********************************/

.faq__icon {
position: relative;
flex: 0 0 30px;

width: 30px;
height: 30px;

color: #276aa1;
background: #edf5fb;
border: 1px solid #c6dceb;
border-radius: 50%;

transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}

.faq__icon::before,
.faq__icon::after {
content: "";

position: absolute;
top: 50%;
left: 50%;

width: 12px;
height: 2px;

background: currentColor;
border-radius: 2px;

transform: translate(-50%, -50%);
}

.faq__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform 0.2s ease;
}

.faq__item[open] .faq__icon {
color: #fff;
background-color: #2d75b7;
border-color: #2d75b7;
}

.faq__item[open] .faq__icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}


/***********************************/
/* Antwortbereich                  */
/***********************************/

.faq__answer {
margin: 0;
padding: 14px 18px 17px;

background: #fff;
}

.faq__answer p {
margin: 0;
padding: 0;

color: var(--faq-muted);
font-family: inherit;
font-size: 15px;
line-height: 1.6;
text-align: left;
}


/***********************************/
/* Öffnungsanimation               */
/***********************************/

.faq__item[open] > .faq__answer {
animation: faq-reveal 0.18s ease-out;
}

@keyframes faq-reveal {
from {
opacity: 0;
transform: translateY(-4px);
}

to {
opacity: 1;
transform: translateY(0);
}
}


/***********************************/
/* Hover nur bei Mausbedienung     */
/***********************************/

@media (hover: hover) and (pointer: fine) {
.faq__question:hover {
color: var(--faq-question-open);
background-color: #f5f9fc;
}
}


/***********************************/
/* Smartphone-Anpassungen          */
/***********************************/

@media (max-width: 600px) {
.faq {
margin: 26px 0 22px;
}

.faq__header {
padding: 18px;
border-radius: 14px;
}

.faq__title {
font-size: 20px;
}

.faq__question {
gap: 12px;
min-height: 54px;
padding: 13px 14px;
}

.faq__icon {
flex-basis: 28px;
width: 28px;
height: 28px;
}

.faq__answer {
padding: 13px 14px 15px;
}
}


/***********************************/
/* Reduzierte Bewegung             */
/***********************************/

@media (prefers-reduced-motion: reduce) {
.faq__item,
.faq__question,
.faq__icon,
.faq__icon::after {
transition: none;
}

.faq__item[open] > .faq__answer {
animation: none;
}
}