/* =====================================================================
Fördermittel-Rechner – CSS
Alles unter #foerdermittel-rechner gekapselt.
In Webflow: Page Settings → Inside tag → in
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
#foerdermittel-rechner {
--fr-red: #b80f18;
--fr-red-strong: #c4161c;
--fr-red-dark: #8a0b12;
--fr-red-soft: #fdecec;
--fr-red-softer: #fff5f5;
--fr-text: #1f1f1f;
--fr-muted: #666666;
--fr-bg: #f4eee9;
--fr-bg-2: #faf6f2;
--fr-card: #ffffff;
--fr-border: #e5ddd5;
--fr-border-strong: #1f1f1f;
--fr-radius: 4px;
--fr-radius-lg: 6px;
--fr-shadow: 0 2px 0 rgba(31,31,31,.04), 0 18px 40px -24px rgba(31,31,31,.18);
--fr-shadow-hover: 0 2px 0 rgba(31,31,31,.06), 0 24px 48px -22px rgba(184,15,24,.28);
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--fr-text);
background: var(--fr-bg);
padding: clamp(40px, 6vw, 96px) 20px;
box-sizing: border-box;
}
#foerdermittel-rechner *,
#foerdermittel-rechner *::before,
#foerdermittel-rechner *::after { box-sizing: border-box; }
#foerdermittel-rechner .fr-container {
max-width: 1120px;
margin: 0 auto;
background: var(--fr-card);
border: 1px solid var(--fr-border);
border-radius: var(--fr-radius-lg);
padding: clamp(24px, 4vw, 56px);
box-shadow: var(--fr-shadow);
position: relative;
}
/* ---------- Header ---------- */
#foerdermittel-rechner .fr-header { margin-bottom: 28px; }
#foerdermittel-rechner .fr-eyebrow {
display: inline-block;
font-family: 'Oswald', 'Inter', sans-serif;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
font-size: 13px;
color: var(--fr-red);
padding: 6px 10px;
border: 1px solid var(--fr-red);
border-radius: 2px;
margin-bottom: 18px;
}
#foerdermittel-rechner .fr-title {
font-family: 'Oswald', 'Inter', sans-serif;
font-weight: 700;
font-stretch: condensed;
text-transform: uppercase;
font-size: clamp(28px, 4.2vw, 48px);
line-height: 1.25;
letter-spacing: .01em;
color: var(--fr-text);
margin: 0 0 10px;
}
#foerdermittel-rechner .fr-subline {
color: var(--fr-muted);
font-size: 16px;
line-height: 1.55;
margin: 0;
max-width: 720px;
}
/* ---------- Progress ---------- */
#foerdermittel-rechner .fr-progress { margin: 28px 0 36px; }
#foerdermittel-rechner .fr-progress-track {
height: 8px;
width: 100%;
background: var(--fr-red-soft);
border-radius: 999px;
overflow: hidden;
}
#foerdermittel-rechner .fr-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--fr-red), var(--fr-red-strong));
transition: width .35s ease;
}
#foerdermittel-rechner .fr-progress-meta {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 13px;
font-weight: 600;
color: var(--fr-muted);
text-transform: uppercase;
letter-spacing: .08em;
}
#foerdermittel-rechner .fr-progress-meta span:last-child { color: var(--fr-red); }
/* ---------- Step Content ---------- */
#foerdermittel-rechner .fr-step { min-height: 280px; }
#foerdermittel-rechner .fr-step-intro {
margin-bottom: 24px;
}
#foerdermittel-rechner .fr-step-intro h3 {
font-family: 'Oswald', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(22px, 2.6vw, 30px);
margin: 0 0 8px;
line-height: 1.1;
}
#foerdermittel-rechner .fr-step-intro p {
margin: 0;
color: var(--fr-muted);
font-size: 15px;
}
#foerdermittel-rechner .fr-step-intro .fr-multi-hint {
display: inline-block;
margin-top: 10px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--fr-red);
background: var(--fr-red-soft);
padding: 4px 8px;
}
/* ---------- Cards Grid ---------- */
#foerdermittel-rechner .fr-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 900px) {
#foerdermittel-rechner .fr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
#foerdermittel-rechner .fr-grid { grid-template-columns: 1fr; }
}
#foerdermittel-rechner .fr-card {
appearance: none;
background: var(--fr-card);
border: 1.5px solid var(--fr-border);
border-radius: var(--fr-radius);
padding: 22px 20px;
text-align: left;
font: inherit;
color: var(--fr-text);
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 130px;
transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#foerdermittel-rechner .fr-card:hover {
border-color: var(--fr-red);
transform: translateY(-2px);
box-shadow: var(--fr-shadow-hover);
}
#foerdermittel-rechner .fr-card:focus-visible {
outline: 3px solid var(--fr-red);
outline-offset: 2px;
}
#foerdermittel-rechner .fr-card[aria-pressed="true"] {
border-color: var(--fr-red);
background: var(--fr-red-softer);
box-shadow: inset 0 0 0 1px var(--fr-red);
}
#foerdermittel-rechner .fr-card[aria-pressed="true"]::after {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--fr-red) url("data:image/svg+xml;utf8,") center/14px no-repeat;
}
#foerdermittel-rechner .fr-card-icon {
width: 36px;
height: 36px;
color: var(--fr-red);
display: inline-flex;
align-items: center;
justify-content: center;
}
#foerdermittel-rechner .fr-card-icon svg { width: 100%; height: 100%; }
#foerdermittel-rechner .fr-card-label {
font-family: 'Oswald', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 17px;
letter-spacing: .02em;
line-height: 1.15;
}
/* ---------- Form (Step 5) ---------- */
#foerdermittel-rechner .fr-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
@media (max-width: 700px) {
#foerdermittel-rechner .fr-form { grid-template-columns: 1fr; }
}
#foerdermittel-rechner .fr-field { display: flex; flex-direction: column; gap: 6px; }
#foerdermittel-rechner .fr-field label {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--fr-text);
}
#foerdermittel-rechner .fr-field input,
#foerdermittel-rechner .fr-field select {
width: 100%;
padding: 14px 14px;
font: inherit;
font-size: 15px;
background: #fff;
color: var(--fr-text);
border: 1.5px solid var(--fr-border);
border-radius: var(--fr-radius);
transition: border-color .15s ease, box-shadow .15s ease;
appearance: none;
}
#foerdermittel-rechner .fr-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 40px;
}
#foerdermittel-rechner .fr-field input:focus,
#foerdermittel-rechner .fr-field select:focus {
outline: none;
border-color: var(--fr-red);
box-shadow: 0 0 0 3px var(--fr-red-soft);
}
#foerdermittel-rechner .fr-field-hint {
margin: 4px 0 0;
font-size: 12px;
color: var(--fr-muted);
line-height: 1.4;
}
#foerdermittel-rechner .fr-field-hint--err {
color: var(--fr-red);
font-weight: 600;
}
#foerdermittel-rechner .fr-input--err {
border-color: var(--fr-red) !important;
background: var(--fr-red-softer);
}
/* ---------- Navigation Buttons ---------- */
#foerdermittel-rechner .fr-nav {
display: flex;
align-items: center;
gap: 12px;
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid var(--fr-border);
flex-wrap: wrap;
}
#foerdermittel-rechner .fr-nav-spacer { flex: 1; }
#foerdermittel-rechner .fr-btn {
appearance: none;
font: inherit;
font-family: 'Oswald', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
font-size: 15px;
padding: 14px 24px;
min-height: 50px;
border-radius: var(--fr-radius);
cursor: pointer;
border: 1.5px solid transparent;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
#foerdermittel-rechner .fr-btn:focus-visible {
outline: 3px solid var(--fr-red);
outline-offset: 2px;
}
#foerdermittel-rechner .fr-btn--primary {
background: var(--fr-red);
color: #fff;
border-color: var(--fr-red);
}
#foerdermittel-rechner .fr-btn--primary:hover:not([disabled]) {
background: var(--fr-red-dark);
border-color: var(--fr-red-dark);
}
#foerdermittel-rechner .fr-btn--primary[disabled] {
opacity: .45;
cursor: not-allowed;
}
#foerdermittel-rechner .fr-btn--ghost {
background: #fff;
color: var(--fr-text);
border-color: var(--fr-border-strong);
}
#foerdermittel-rechner .fr-btn--ghost:hover { background: #f7f3ee; }
/* ---------- Result ---------- */
#foerdermittel-rechner .fr-result-head {
margin-bottom: 24px;
}
#foerdermittel-rechner .fr-result-head h3 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: clamp(24px, 3vw, 34px);
margin: 0 0 8px;
}
#foerdermittel-rechner .fr-result-head p { color: var(--fr-muted); margin: 0; }
#foerdermittel-rechner .fr-result-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
@media (max-width: 800px) {
#foerdermittel-rechner .fr-result-list { grid-template-columns: 1fr; }
}
#foerdermittel-rechner .fr-result-card {
background: #fff;
border: 1.5px solid var(--fr-border);
border-left: 4px solid var(--fr-red);
border-radius: var(--fr-radius);
padding: 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
#foerdermittel-rechner .fr-result-card h4 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 22px;
margin: 0;
line-height: 1.15;
}
#foerdermittel-rechner .fr-result-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#foerdermittel-rechner .fr-tag {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
background: var(--fr-bg);
color: var(--fr-text);
padding: 4px 8px;
border-radius: 2px;
}
#foerdermittel-rechner .fr-tag--red {
background: var(--fr-red-soft);
color: var(--fr-red);
}
#foerdermittel-rechner .fr-result-card dl {
margin: 0;
display: grid;
grid-template-columns: 130px 1fr;
gap: 6px 12px;
font-size: 14px;
}
#foerdermittel-rechner .fr-result-card dt {
color: var(--fr-muted);
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .06em;
}
#foerdermittel-rechner .fr-result-card dd { margin: 0; color: var(--fr-text); }
#foerdermittel-rechner .fr-result-card .fr-btn { align-self: flex-start; margin-top: 6px; }
/* Mini Visitenkarten-Variante (ohne Details-Button) */
#foerdermittel-rechner .fr-result-list--mini { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { #foerdermittel-rechner .fr-result-list--mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #foerdermittel-rechner .fr-result-list--mini { grid-template-columns: 1fr; } }
#foerdermittel-rechner .fr-result-card--mini {
padding: 18px 18px;
gap: 10px;
}
#foerdermittel-rechner .fr-result-card--mini h4 { font-size: 19px; }
#foerdermittel-rechner .fr-result-card--mini dl {
grid-template-columns: 90px 1fr;
font-size: 13px;
gap: 4px 10px;
}
#foerdermittel-rechner .fr-result-card--mini dt { font-size: 11px; }
#foerdermittel-rechner .fr-region-fixed {
margin: 0;
padding: 12px 16px;
background: var(--fr-red-soft);
border-left: 3px solid var(--fr-red);
border-radius: 6px;
font-size: 14px;
color: var(--fr-text);
}
#foerdermittel-rechner .fr-region-fixed strong { color: var(--fr-red); }
#foerdermittel-rechner .fr-result-hinweis {
margin: 4px 0 0;
padding: 10px 12px;
background: var(--fr-red-soft);
border-left: 3px solid var(--fr-red);
border-radius: 6px;
font-size: 12.5px;
line-height: 1.45;
color: var(--fr-text);
}
/* ---------- Kontaktformular ---------- */
#foerdermittel-rechner .fr-contact {
margin-top: 36px;
background: var(--fr-text);
color: #fff;
padding: clamp(24px, 3.5vw, 40px);
border-radius: var(--fr-radius-lg);
}
#foerdermittel-rechner .fr-contact-head { margin-bottom: 22px; }
#foerdermittel-rechner .fr-contact-head h4 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: clamp(22px, 2.4vw, 28px);
margin: 0 0 6px;
line-height: 1.1;
}
#foerdermittel-rechner .fr-contact-head p { margin: 0; color: #d4d4d4; font-size: 14px; }
#foerdermittel-rechner .fr-contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 640px) {
#foerdermittel-rechner .fr-contact-form { grid-template-columns: 1fr; }
}
#foerdermittel-rechner .fr-contact-form .fr-field { gap: 6px; }
#foerdermittel-rechner .fr-contact-form .fr-field--full { grid-column: 1 / -1; }
#foerdermittel-rechner .fr-contact-form label { color: #fff; }
#foerdermittel-rechner .fr-contact-form input,
#foerdermittel-rechner .fr-contact-form textarea {
width: 100%;
padding: 13px 14px;
font: inherit;
font-size: 15px;
background: #2a2a2a;
color: #fff;
border: 1.5px solid #3a3a3a;
border-radius: var(--fr-radius);
transition: border-color .15s ease, box-shadow .15s ease;
resize: vertical;
}
#foerdermittel-rechner .fr-contact-form input:focus,
#foerdermittel-rechner .fr-contact-form textarea:focus {
outline: none;
border-color: var(--fr-red);
box-shadow: 0 0 0 3px rgba(184,15,24,.35);
}
#foerdermittel-rechner .fr-contact-form input::placeholder,
#foerdermittel-rechner .fr-contact-form textarea::placeholder { color: #888; }
#foerdermittel-rechner .fr-contact-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 4px;
}
#foerdermittel-rechner .fr-contact-disclaimer {
margin: 0;
font-size: 11px;
line-height: 1.45;
color: #a8a8a8;
flex: 1;
min-width: 220px;
}
#foerdermittel-rechner .fr-contact-status {
grid-column: 1 / -1;
margin-top: 6px;
padding: 14px 16px;
font-weight: 600;
border-radius: var(--fr-radius);
}
#foerdermittel-rechner .fr-contact-status--ok {
background: #1f6b3a;
color: #fff;
}
#foerdermittel-rechner .fr-contact-status--err {
background: var(--fr-red);
color: #fff;
}
#foerdermittel-rechner .fr-cta-block {
margin-top: 32px;
background: var(--fr-text);
color: #fff;
padding: 28px;
border-radius: var(--fr-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
#foerdermittel-rechner .fr-cta-block h4 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 22px;
margin: 0 0 4px;
}
#foerdermittel-rechner .fr-cta-block p { margin: 0; color: #d4d4d4; font-size: 14px; }
#foerdermittel-rechner .fr-cta-block .fr-btn--primary { background: var(--fr-red); border-color: var(--fr-red); }
#foerdermittel-rechner .fr-empty {
text-align: center;
padding: 40px 20px;
background: var(--fr-bg-2);
border: 1px dashed var(--fr-border);
border-radius: var(--fr-radius);
}
#foerdermittel-rechner .fr-empty h4 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 22px;
margin: 0 0 6px;
}
#foerdermittel-rechner .fr-empty p { color: var(--fr-muted); margin: 0 0 16px; }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
#foerdermittel-rechner * { transition: none !important; }
}