.felix-kc {
--felix-bg: #f5f8f5;
--felix-card: #ffffff;
--felix-text: #24302a;
--felix-muted: #5f6c65;
--felix-border: #dce6df;
--felix-accent: #3f7259;
--felix-accent-dark: #2f5c46;
--felix-soft: #eaf2ed;
--felix-warning: #fff8e7;
--felix-warning-border: #ead9a5;
max-width: 900px;
margin: 2rem auto;
color: var(--felix-text);
font-family: inherit;
}
.felix-kc * { box-sizing: border-box; }
.felix-kc__card {
background: var(--felix-card);
border: 1px solid var(--felix-border);
border-radius: 22px;
padding: clamp(22px, 4vw, 44px);
box-shadow: 0 14px 40px rgba(29,54,42,.08);
}
/*
* Version 2.7.2: Kopfzeile der Hauptkarte. Links der bestehende Kicker-Text
* "FELIX Demenzbegleitung", rechts das neue Markenbild (Badge). Beide Kinder
* werden oben ausgerichtet, damit das Markenbild sichtbar "rechts oben" in
* der Karte sitzt, auch wenn es höher ist als eine Textzeile.
*/
.felix-kc__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.felix-kc__eyebrow {
color: var(--felix-accent);
font-size: .85rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding-top: .3rem;
}
/*
* Markenbild-Badge oben rechts. clamp() haelt die Groesse zwischen Mobile-
* und Desktop-Breakpoint fluessig; feste obere Grenze, damit das Bild neben
* dem kurzen Kicker-Text nie dominanter wirkt als Titel/Fortschrittsanzeige
* darunter. width/height im ![]()
-Tag entsprechen der echten Bildgroesse
* (480x416) und verhindern Layout-Sprung (CLS) beim Laden.
*/
.felix-kc__brand-badge {
flex: 0 0 auto;
width: clamp(120px, 14vw, 170px);
height: auto;
display: block;
}
.felix-kc h2,
.felix-kc h3 {
color: var(--felix-text);
line-height: 1.2;
}
.felix-kc h2 {
font-size: clamp(2rem,5vw,3.1rem);
margin: 0 0 1rem;
}
.felix-kc h3 {
font-size: clamp(1.4rem,3vw,2rem);
margin: 0 0 1rem;
}
.felix-kc p,
.felix-kc li,
.felix-kc label,
.felix-kc select,
.felix-kc input,
.felix-kc button,
.felix-kc a {
font-size: 1rem;
}
.felix-kc__lead {
font-size: 1.16rem !important;
color: var(--felix-muted);
}
.felix-kc__progress-wrap { margin-bottom: 2rem; }
.felix-kc__progress {
height: 9px;
background: var(--felix-soft);
border-radius: 999px;
overflow: hidden;
}
.felix-kc__progress-bar {
display: block;
height: 100%;
background: var(--felix-accent);
transition: width .25s ease;
}
.felix-kc__progress-text {
color: var(--felix-muted);
font-size: .85rem;
margin-top: .45rem;
}
.felix-kc__screen { display: none; }
.felix-kc__screen.is-active {
display: block;
animation: felixFade .2s ease;
}
@keyframes felixFade {
from { opacity:0; transform:translateY(4px); }
to { opacity:1; transform:translateY(0); }
}
.felix-kc__step-label {
color: var(--felix-accent);
font-weight: 700;
margin-bottom: .6rem;
}
.felix-kc__notice {
padding: 16px 18px;
border-radius: 14px;
background: var(--felix-soft);
margin: 1.25rem 0;
}
.felix-kc__notice--important {
background: var(--felix-warning);
border: 1px solid var(--felix-warning-border);
}
.felix-kc__intro-list {
padding-left: 1.2rem;
margin: 1.4rem 0;
}
.felix-kc__consent {
display: flex;
gap: .75rem;
align-items: flex-start;
margin: 1.4rem 0;
}
.felix-kc__consent input {
width: 20px;
height: 20px;
margin-top: 2px;
}
.felix-kc__grid {
display: grid;
gap: 1rem;
margin: 1.25rem 0;
}
.felix-kc__grid--2 {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.felix-kc__grid--5 {
grid-template-columns: repeat(5,minmax(0,1fr));
}
.felix-kc label > span {
display:block;
font-weight:600;
margin-bottom:.45rem;
}
.felix-kc select,
.felix-kc input[type="text"] {
width:100%;
border:1px solid var(--felix-border);
border-radius:12px;
padding:.85rem .95rem;
background:#fff;
color:var(--felix-text);
}
.felix-kc select:focus,
.felix-kc input:focus,
.felix-kc button:focus,
.felix-kc a:focus {
outline:3px solid rgba(63,114,89,.2);
outline-offset:2px;
}
.felix-kc__words {
display:grid;
gap:1rem;
margin:1.5rem 0;
}
.felix-kc__words--5 {
grid-template-columns:repeat(5,minmax(0,1fr));
}
.felix-kc__words span,
.felix-kc__sequence,
.felix-kc__question {
background:var(--felix-soft);
border-radius:16px;
padding:1.2rem;
text-align:center;
font-weight:700;
}
.felix-kc__sequence {
font-size:clamp(1.5rem,5vw,2.4rem);
letter-spacing:.08em;
margin:1.4rem 0;
}
.felix-kc__question {
text-align:left;
margin:1.3rem 0;
}
.felix-kc__choices {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.75rem;
border:0;
padding:0;
margin:1rem 0;
}
.felix-kc__choices--single {
grid-template-columns:1fr;
}
.felix-kc__choices legend {
margin-bottom:1rem;
font-weight:600;
}
.felix-kc__choices label {
display:flex;
align-items:center;
gap:.65rem;
padding:.9rem 1rem;
border:1px solid var(--felix-border);
border-radius:12px;
cursor:pointer;
}
.felix-kc__actions {
display:flex;
gap:.75rem;
margin-top:1.6rem;
}
.felix-kc__actions--wrap { flex-wrap:wrap; }
/*
* Alle Hauptaktionsbuttons sind laut Designvorgabe einheitlich im FELIX-Grün
* gehalten (Start/Weiter-Buttons ebenso wie die Ergebnis-CTAs "Check
* wiederholen", "Mehr zur Demenz-Früherkennung" und "Beratung buchen").
* Diese eine Regel gilt gleichermaßen für