.foe-warenkorb {
--foe-badge-bg: var(--wp--preset--color--gold, #f8bf3b);
--foe-badge-text: var(--wp--preset--color--navy, #142543);
--foe-badge-size: 11px;
position: relative;
display: inline-flex;
align-items: center;
color: inherit;
line-height: 1;
text-decoration: none;
}
.foe-warenkorb__icon {
display: block;
}
.foe-warenkorb__zahl {
position: absolute;
top: -0.4em;
right: -0.6em;
min-width: 1.5em;
padding: 0 0.35em;
box-sizing: border-box;
border-radius: 999px;
background: var(--foe-badge-bg);
color: var(--foe-badge-text);
font-size: var(--foe-badge-size);
font-weight: 700;
line-height: 1.5em;
text-align: center;
white-space: nowrap; pointer-events: none;
} .foe-warenkorb__zahl:empty {
display: none;
}.foe-check {
--foe-check-schrift: var(--wp--preset--color--schrift);
--foe-check-ueberschrift: var(--wp--preset--color--navy);
--foe-check-gedaempft: var(--wp--preset--color--text-grau);
--foe-check-feld: var(--wp--preset--color--weiss);
--foe-check-karte: var(--wp--preset--color--weiss);
--foe-check-rahmen: var(--wp--preset--color--mittelblau);
--foe-check-akzent: var(--wp--preset--color--gold-dunkel);
--foe-check-link: var(--wp--preset--color--navy);
--foe-check-gewaehlt: var(--wp--preset--color--navy);
--foe-check-gewaehlt-schrift: var(--wp--preset--color--creme); --foe-check-balken: var(--wp--preset--color--navy);
--foe-check-spur: rgba(20, 37, 67, 0.14);
--foe-check-hero-grund: var(--wp--preset--color--navy);
--foe-check-fehler: #b3261e;
--foe-check-radius: 12px;
color: var(--foe-check-schrift);
} :where(.has-navy-background-color, .has-navy-tief-background-color) .foe-check,
.foe-check.foe-check--dunkel {
--foe-check-schrift: var(--wp--preset--color--creme);
--foe-check-ueberschrift: var(--wp--preset--color--creme); --foe-check-gedaempft: #c4c6c4;
--foe-check-gedaempft: color-mix(in srgb, var(--wp--preset--color--creme) 78%, var(--wp--preset--color--navy));
--foe-check-feld: transparent;
--foe-check-karte: rgba(255, 255, 255, 0.05);
--foe-check-akzent: var(--wp--preset--color--gold);
--foe-check-link: var(--wp--preset--color--gold);
--foe-check-gewaehlt: var(--wp--preset--color--gold);
--foe-check-gewaehlt-schrift: var(--wp--preset--color--navy);
--foe-check-balken: var(--wp--preset--color--gold);
--foe-check-spur: rgba(248, 191, 59, 0.22);
--foe-check-hero-grund: var(--wp--preset--color--navy-tief);
--foe-check-fehler: #ff9f9b;
} .foe-check {
margin-inline: auto;
max-width: 46rem;
} .foe-check :where(input, select, textarea, button) {
box-sizing: border-box;
} .foe-check :is(h2, h3, h4) {
color: var(--foe-check-ueberschrift);
}
.foe-check__titel {
font-size: var(--wp--preset--font-size--ueberschrift);
margin: 0 0 var(--wp--preset--spacing--20);
}
.foe-check__text > :first-child,
.foe-check__text > p:first-child {
margin-top: 0;
}
.foe-check__meta {
color: var(--foe-check-gedaempft);
font-size: var(--wp--preset--font-size--klein);
letter-spacing: 0.04em;
margin: 0 0 var(--wp--preset--spacing--30);
text-transform: uppercase;
} .foe-check__unsichtbar {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.foe-check__hinweis {
background: var(--foe-check-karte);
border: 1px solid var(--foe-check-rahmen);
border-radius: var(--foe-check-radius);
margin: 0;
padding: 1em 1.2em;
} .foe-check__knopf {
background-color: var(--wp--preset--color--gold);
border: 1px solid var(--wp--preset--color--gold);
border-radius: var(--foe-check-radius); box-sizing: border-box;
color: var(--wp--preset--color--navy);
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: var(--wp--preset--font-size--klein);
font-weight: 700;
min-height: 3rem;
padding: 0.8em 1.6em;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.foe-check__knopf:hover,
.foe-check__knopf:focus-visible {
background-color: var(--wp--preset--color--gold-dunkel);
border-color: var(--wp--preset--color--gold-dunkel);
color: var(--wp--preset--color--creme);
} .foe-check__knopf--still {
background-color: transparent;
border-color: var(--foe-check-rahmen);
color: var(--foe-check-schrift);
}
.foe-check__knopf--still:hover,
.foe-check__knopf--still:focus-visible {
background-color: transparent;
border-color: var(--foe-check-akzent);
color: var(--foe-check-akzent);
}
.foe-check__knopf:disabled,
.foe-check__knopf--arbeitet {
cursor: progress;
opacity: 0.6;
}
.foe-check__neu {
background: none;
border: 0;
color: var(--foe-check-gedaempft);
cursor: pointer;
font-family: inherit;
font-size: var(--wp--preset--font-size--klein);
margin-inline-start: 1em;
padding: 0.6em 0;
text-decoration: underline;
}
.foe-check__neu:hover {
color: var(--foe-check-akzent);
} .foe-check__fortschritt {
margin-bottom: var(--wp--preset--spacing--30);
}
.foe-check__balken {
background: var(--foe-check-spur);
border-radius: 4px;
height: 6px;
overflow: hidden;
}
.foe-check__balken > span {
background: var(--foe-check-balken);
border-radius: 0 4px 4px 0;
display: block;
height: 100%;
transition: width 0.3s ease-out;
}
.foe-check__zaehler {
color: var(--foe-check-gedaempft);
font-size: var(--wp--preset--font-size--klein);
font-variant-numeric: tabular-nums;
margin: 0.5em 0 0;
} .foe-check__schritt:focus {
outline: none;
}
.foe-check__schritt-titel {
font-size: var(--wp--preset--font-size--x-gross);
margin: 0 0 0.3em;
}
.foe-check__schritt-text {
color: var(--foe-check-gedaempft);
margin: 0 0 var(--wp--preset--spacing--30);
} .foe-check__skala-hinweis {
color: var(--foe-check-gedaempft);
font-size: var(--wp--preset--font-size--klein);
margin: calc(-1 * var(--wp--preset--spacing--20)) 0 var(--wp--preset--spacing--20);
}
.foe-check__frage {
background: var(--foe-check-karte);
border: 1px solid var(--foe-check-rahmen);
border-radius: var(--foe-check-radius);
margin: 0 0 var(--wp--preset--spacing--20);
min-width: 0;
padding: var(--wp--preset--spacing--20);
} .foe-check__legende {
display: block;
float: left;
margin: 0;
padding: 0;
width: 100%;
} .foe-check__nummer {
color: var(--foe-check-gedaempft);
font-size: var(--wp--preset--font-size--klein);
font-weight: 700;
margin-inline-end: 0.5em;
}
.foe-check__kicker {
color: var(--foe-check-gedaempft);
display: block;
font-size: var(--wp--preset--font-size--klein);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.foe-check__fragetext {
display: block;
font-size: var(--wp--preset--font-size--gross);
font-weight: 600;
margin-top: 0.2em;
} .foe-check__fragetext,
.foe-check__schritt-titel {
hyphens: auto;
overflow-wrap: break-word;
} .foe-check__skala {
display: grid;
gap: 0.5rem;
clear: both;
grid-template-columns: 1fr;
margin-top: var(--wp--preset--spacing--20);
}
.foe-check__stufe {
align-items: center;
background: var(--foe-check-feld);
border: 1px solid var(--foe-check-rahmen);
border-radius: var(--foe-check-radius);
cursor: pointer;
display: flex;
flex-direction: row;
gap: 0.6em; min-height: 44px;
padding: 0.6em 0.8em;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.foe-check__stufe input { height: 1px;
opacity: 0;
position: absolute;
width: 1px;
}
.foe-check__stufe-wert {
color: var(--foe-check-gedaempft);
font-size: var(--wp--preset--font-size--klein);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.foe-check__stufe-text {
font-size: var(--wp--preset--font-size--klein);
line-height: 1.3;
}
.foe-check__stufe:hover {
border-color: var(--foe-check-akzent);
}
.foe-check__stufe:has(input:focus-visible) {
outline: 2px solid var(--foe-check-akzent);
outline-offset: 2px;
}
.foe-check__stufe:has(input:checked) {
background: var(--foe-check-gewaehlt);
border-color: var(--foe-check-gewaehlt);
color: var(--foe-check-gewaehlt-schrift);
}
.foe-check__stufe:has(input:checked) .foe-check__stufe-wert {
color: var(--foe-check-gewaehlt-schrift);
} .foe-check__stufe--ohne-wertung {
border-style: dashed;
}
@media (min-width: 40rem) { .foe-check__skala {
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
} .foe-check__stufe {
flex-direction: column;
gap: 0.2em;
justify-content: flex-start;
text-align: center;
}
} .foe-check__navigation {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--wp--preset--spacing--30);
}
.foe-check__navigation [data-foe-weiter] {
margin-inline-start: auto;
}
.foe-check__fehler {
color: var(--foe-check-fehler);
font-weight: 700;
margin: var(--wp--preset--spacing--20) 0 0;
} .foe-check__falle {
height: 1px;
left: -9999px;
overflow: hidden;
position: absolute;
width: 1px;
} .foe-check__reflexion {
margin: 0 0 var(--wp--preset--spacing--30);
}
.foe-check__reflexion-frage {
display: block;
font-size: var(--wp--preset--font-size--gross);
font-weight: 600;
hyphens: auto;
margin-bottom: 0.5em;
overflow-wrap: break-word;
}
.foe-check__reflexion-antwort {
background: var(--foe-check-feld);
border: 1px solid var(--foe-check-rahmen);
border-radius: var(--foe-check-radius);
color: var(--foe-check-schrift);
display: block;
font-family: inherit;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.5;
min-height: 6rem;
padding: 0.6em 0.8em;
resize: vertical;
width: 100%;
}
.foe-check__reflexion-antwort:focus-visible {
border-color: var(--foe-check-akzent);
outline: 2px solid var(--foe-check-akzent);
outline-offset: 1px;
} .foe-check__lead {
background: var(--foe-check-karte);
border: 1px solid var(--foe-check-rahmen);
border-radius: var(--foe-check-radius);
margin-top: var(--wp--preset--spacing--30);
padding: var(--wp--preset--spacing--30);
}
.foe-check__lead-titel {
font-size: var(--wp--preset--font-size--x-gross);
margin: 0 0 0.5em;
}
.foe-check__felder {
display: grid;
gap: var(--wp--preset--spacing--20);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
margin: var(--wp--preset--spacing--20) 0;
}
.foe-check__feld {
margin: 0;
min-width: 0;
}
.foe-check__feld label {
display: block;
font-size: var(--wp--preset--font-size--klein);
font-weight: 700;
margin-bottom: 0.3em;
}
.foe-check__pflicht {
color: var(--foe-check-akzent);
}
.foe-check__feld input {
background: var(--foe-check-feld);
border: 1px solid var(--foe-check-rahmen);
border-radius: var(--foe-check-radius);
color: var(--foe-check-schrift);
font-family: inherit;
font-size: var(--wp--preset--font-size--medium);
min-height: 3rem;
padding: 0.6em 0.8em;
width: 100%;
}
.foe-check__feld input:focus-visible {
border-color: var(--foe-check-akzent);
outline: 2px solid var(--foe-check-akzent);
outline-offset: 1px;
}
.foe-check__einwilligung {
font-size: var(--wp--preset--font-size--klein);
margin: var(--wp--preset--spacing--20) 0;
} .foe-check__haken {
align-items: start;
cursor: pointer;
display: flex;
gap: 0.7em;
}
.foe-check__haken input {
accent-color: var(--foe-check-akzent);
flex: 0 0 auto;
height: 1.25rem;
margin-top: 0.15rem;
width: 1.25rem;
} .foe-check__anliegen {
border: 0;
display: grid;
gap: 0.6rem;
margin: var(--wp--preset--spacing--20) 0;
min-width: 0;
padding: 0;
}
.foe-check__anliegen .foe-check__haken {
font-weight: 700;
}
.foe-check__bestaetigung {
background: var(--foe-check-karte);
border: 1px solid var(--foe-check-rahmen);
border-inline-start: 4px solid var(--foe-check-akzent);
border-radius: var(--foe-check-radius);
margin-top: var(--wp--preset--spacing--30);
padding: var(--wp--preset--spacing--30);
}
.foe-check__bestaetigung:focus {
outline: none;
}
.foe-check__bestaetigung > p {
font-size: var(--wp--preset--font-size--gross);
margin: 0;
} .foe-check__einwilligung a {
color: var(--foe-check-link);
text-decoration: underline;
}
.foe-check__einwilligung-text > :first-child {
margin-top: 0;
}
.foe-check__einwilligung-text > :last-child {
margin-bottom: 0;
}  .foe-check__gesamt {
--foe-check-schrift: var(--wp--preset--color--creme);
--foe-check-ueberschrift: var(--wp--preset--color--creme);
--foe-check-gedaempft: #c4c6c4;
--foe-check-gedaempft: color-mix(in srgb, var(--wp--preset--color--creme) 78%, var(--wp--preset--color--navy));
--foe-check-akzent: var(--wp--preset--color--gold);
background: var(--foe-check-hero-grund);
border-radius: var(--foe-check-radius);
color: var(--foe-check-schrift);
display: grid;
gap: var(--wp--preset--spacing--20);
padding: var(--wp--preset--spacing--30);
}
@media (min-width: 40rem) {
.foe-check__gesamt {
align-items: center;
grid-template-columns: auto 1fr;
gap: var(--wp--preset--spacing--30);
}
}
.foe-check__hero {
margin: 0;
} .foe-check__hero-zahl {
color: var(--wp--preset--color--gold);
display: block;
font-size: clamp(3rem, 8vw, 4.25rem);
font-weight: 700;
line-height: 1;
}
.foe-check__hero-einheit {
font-size: 0.5em;
margin-inline-start: 0.1em;
}
.foe-check__hero-label {
color: var(--foe-check-gedaempft);
display: block;
font-size: var(--wp--preset--font-size--klein);
letter-spacing: 0.08em;
text-transform: uppercase;
} .foe-check__ergebnisstufe {
min-width: 0;
}
.foe-check__ergebnisstufe-titel {
font-size: var(--wp--preset--font-size--x-gross);
margin: 0 0 0.4em;
}
.foe-check__ergebnisstufe > .foe-check__text > :first-child {
margin-top: 0;
}
.foe-check__ergebnisstufe > .foe-check__text > :last-child {
margin-bottom: 0;
}
.foe-check__profil {
margin-top: var(--wp--preset--spacing--40);
}
.foe-check__profil-titel {
font-size: var(--wp--preset--font-size--x-gross);
margin: 0 0 var(--wp--preset--spacing--20);
}
.foe-check__meter-liste {
list-style: none;
margin: 0;
padding: 0;
}
.foe-check__meter {
display: grid;
gap: 0.15rem 0.75rem;
grid-template-columns: 1fr auto;
margin-bottom: var(--wp--preset--spacing--20);
}
.foe-check__meter-name {
min-width: 0;
overflow-wrap: break-word;
}
.foe-check__meter-wert {
font-variant-numeric: tabular-nums;
font-weight: 700;
text-align: end;
}
.foe-check__meter-spur {
background: var(--foe-check-spur);
border-radius: 4px;
grid-column: 1 / -1;
height: 12px;
overflow: hidden;
}
.foe-check__meter-fuellung {
background: var(--foe-check-balken);
border-radius: 0 4px 4px 0;
display: block;
height: 100%;
} .foe-check__meter-skala,
.foe-check__meter-ohne {
color: var(--foe-check-gedaempft);
font-size: var(--wp--preset--font-size--klein);
font-weight: 400;
}
.foe-check__meter-einordnung,
.foe-check__meter-hinweis {
grid-column: 1 / -1;
margin: 0.2rem 0 0;
}
.foe-check__meter-hinweis {
color: var(--foe-check-gedaempft);
font-size: var(--wp--preset--font-size--klein);
} .foe-check__auffaellig {
margin-top: var(--wp--preset--spacing--40);
}
.foe-check__auffaellig-titel {
font-size: var(--wp--preset--font-size--x-gross);
margin: 0 0 0.4em;
}
.foe-check__auffaellig-liste {
list-style: none;
margin: var(--wp--preset--spacing--20) 0 0;
padding: 0;
}
.foe-check__auffaellig-punkt {
align-items: start;
border-inline-start: 3px solid var(--foe-check-akzent);
display: flex;
gap: 0.9em;
margin-bottom: var(--wp--preset--spacing--20);
padding-inline-start: 0.9em;
}
.foe-check__auffaellig-wert {
border: 1px solid var(--foe-check-rahmen);
border-radius: 8px;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: 700;
min-width: 2.2em;
padding: 0.15em 0.4em;
text-align: center;
}
.foe-check__auffaellig-aussage {
min-width: 0;
overflow-wrap: break-word;
}
.foe-check__einordnung,
.foe-check__empfehlung {
margin-top: var(--wp--preset--spacing--30);
}
.foe-check__empfehlung {
background: var(--foe-check-karte);
border: 1px solid var(--foe-check-rahmen);
border-radius: var(--foe-check-radius);
padding: var(--wp--preset--spacing--30);
}
.foe-check__empfehlung > :first-child {
margin-top: 0;
}
.foe-check__empfehlung > :last-child {
margin-bottom: 0;
}
.foe-check__cta {
margin-top: var(--wp--preset--spacing--30);
}
.foe-check__cta-hinweis {
color: var(--foe-check-gedaempft);
display: block;
font-size: var(--wp--preset--font-size--klein);
margin-top: 0.6em;
} .foe-check--editor .foe-check__formular,
.foe-check--editor .foe-check__einstieg {
pointer-events: none;
}
.foe-check--editor .foe-check__vorschau-hinweis {
background: var(--wp--preset--color--creme);
border-radius: var(--foe-check-radius);
color: var(--wp--preset--color--text-grau);
font-size: var(--wp--preset--font-size--klein);
margin: 0 0 var(--wp--preset--spacing--20);
padding: 0.8em 1em;
}
@media (prefers-reduced-motion: reduce) {
.foe-check__knopf,
.foe-check__stufe,
.foe-check__balken > span {
transition: none;
}
}