/* BVH Design 2: Für Verbraucher (Hauptseite, Wegweiser, Alltag in Zahlen). Baut auf v2-haushaltskompass.css und v2-unternehmen.css auf. */

/* Einstieg nach Thema */
.fv .fv-einstieg{align-self:start}
.fv-chips{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fv-chips a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--ti);color:var(--t);text-decoration:none;font-size:16px;font-weight:500;line-height:1.3;transition:background-color .2s}
.fv-chips a:hover,.fv-chips a:focus-visible{background:var(--m)}
.fv-chips__ic{flex:0 0 36px;height:36px;border-radius:10px;background:#fff;color:var(--b);display:grid;place-items:center}
.fv-chips__ic svg{width:20px;height:20px}

/* Schritte zur Beschwerde: vier nebeneinander */
.fv .fv-schritte{grid-template-columns:repeat(4,minmax(0,1fr))}
.fv-hinweiszeile{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:36px;flex-wrap:wrap}
.fv-hinweiszeile .hk-klein{max-width:720px;margin:0!important}
.fv-hinweiszeile .hk-knoepfe{margin-top:0!important}

/* Themen-Kacheln mit Zahl statt Pfeil */
.fv-themen .hk-kachel .hk-klein{margin-top:auto!important}

/* Stand der Daten, ohne Punkt */
.fv-stand{margin:0 0 18px!important}

/* Wegweiser */
.fv-w-themen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}
.fv-w-themen button{font:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;padding:18px;border:0;border-radius:15px;background:var(--ti);color:var(--t);font-size:16px;font-weight:600;line-height:1.3;cursor:pointer;min-height:132px;transition:background-color .2s,color .2s}
.fv-w-themen button:hover,.fv-w-themen button:focus-visible{background:var(--m)}
.fv-w-themen button.on{background:var(--n);color:#fff}
.fv-w-ic{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--b);display:grid;place-items:center}
.fv-w-ic svg{width:22px;height:22px}
.fv-w-suche{display:block;margin:22px 0 4px}
.fv-w-suche input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:14px 20px;border-radius:148px;border:1px solid #C9D3D2;background:#fff;color:var(--t)}
.fv-w-suche input:focus{outline:2px solid var(--b);outline-offset:2px;border-color:var(--b)}
.fv-w-anliegen{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fv-w-anliegen button{font:inherit;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;padding:15px 18px;border:0;border-radius:10px;background:var(--ti);color:var(--t);font-size:16px;font-weight:500;line-height:1.35;cursor:pointer;transition:background-color .2s}
.fv-w-anliegen button svg{flex:0 0 20px;color:var(--b);transition:transform .25s cubic-bezier(.19,1,.22,1)}
.fv-w-anliegen button:hover,.fv-w-anliegen button:focus-visible{background:var(--m)}
.fv-w-anliegen button:hover svg{transform:translateX(3px)}
.fv-w-anliegen button.on{background:var(--n);color:#fff}
.fv-w-anliegen button.on svg{color:#fff}
.fv-w-anliegen .fv-w-anders button{background:#fff;border:1px solid #C9D3D2}
.fv-w-leer{margin-top:14px!important}
.fv-w-fort{max-width:none}
.fv-w-wahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important}
.fv-w-wahl span{display:inline-block;padding:7px 14px;border-radius:148px;background:#fff;font-size:15px;font-weight:500;line-height:1.3;color:var(--t)}
.fv-w-weg{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fv-w-weg>li{display:flex;flex-direction:column}
.fv-w-weg h3{margin:0 0 10px}
.fv-w-weg .hk-klein{margin:0 0 6px!important}
.fv-w-links{list-style:none;margin:10px 0 0;padding:0}
.fv-w-links li{border-top:1px solid #E3E9E8}
.fv-w-links li:first-child{border-top:0}
.fv-w-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;color:var(--t);text-decoration:none}
.fv-w-links a span{display:flex;flex-direction:column;gap:3px}
.fv-w-links a b{font-size:16px;font-weight:600;line-height:1.35}
.fv-w-links a small{font-size:14px;color:#4C5D5E;line-height:1.35}
.fv-w-links a svg{flex:0 0 20px;color:var(--b);transition:transform .25s cubic-bezier(.19,1,.22,1)}
.fv-w-links a:hover b{text-decoration:underline;text-underline-offset:3px}
.fv-w-links a:hover svg{transform:translateX(3px)}
.fv-w-mitglied{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.fv-w-mitglied .hk-klein{margin:6px 0 0!important;max-width:640px}
.fv-w-mitglied .hk-knoepfe{margin-top:0!important;align-items:center}
.fv-w-neu{font:inherit;font-size:15px;font-weight:600;background:none;border:0;color:var(--t);cursor:pointer;padding:10px 6px;text-decoration:underline;text-underline-offset:3px}
.fv-w-fuss{margin-top:22px!important}
.fv-w-vorschau li span:nth-child(2){font-weight:500}

@media (max-width:1100px){
	.fv .fv-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
	.fv-w-themen{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
	.fv .fv-schritte,.fv-w-weg,.fv-w-anliegen,.fv-chips{grid-template-columns:1fr}
	.fv-w-themen{grid-template-columns:repeat(2,minmax(0,1fr))}
	.fv-w-themen button{min-height:0;padding:14px}
}
#fu-druckblatt .fv-w-weg{grid-template-columns:1fr 1fr!important}
#fu-druckblatt .fv-w-links a svg{display:none}

/* Ergebnis mobil: Knoepfe kompakt unter der Auswahl */
@media (max-width:760px){
	.fv [data-fv-erg] .hk-kopfzeile{gap:18px;margin-bottom:0}
	.fv [data-fv-erg] .hk-knoepfe{margin-top:0!important;gap:10px;flex-wrap:wrap}
	.fv [data-fv-erg] .hk-knoepfe .hk-pill{padding:12px 20px;font-size:15px}
	.fv-w-weg{margin-top:24px}
}