/* Fidano – gemeinsame Bausteine aller Seiten (entstanden aus der Seite „Partner werden“).
   Präfix fp-: Abschnitte, Kacheln, Aufklapper, Reiter, Formular, Handy-Leiste.
   Nur Rollen-Token aus fidano-tokens.css (fidano-design REGELN.md 3), keine festen Farbwerte.
   Hell = :root, dunkel = [data-theme="dark"] am <html> oder an einer dunklen Fläche (Einstieg, Abschluss). */

.fp { background: var(--grund); color: var(--text); font-family: var(--schrift-text); }
.fp :is(h1, h2, h3) { color: var(--text); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); }
.fp p { margin: 0; }
.fp-wrap { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: var(--rand); }
.fp-zahl { font-variant-numeric: tabular-nums; }
.fp .f-ico { width: 1.375rem; height: 1.375rem; }

/* Bausteine */
.fp-label { font-size: var(--gr-label); font-weight: var(--gewicht-ui); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--akzent); }
.fp-h2 { font-size: var(--gr-h1); line-height: var(--zh-h1); margin: 0; max-width: 22ch; }
.fp-unterzeile { font-size: var(--gr-unterzeile); color: var(--akzent-gross); margin-top: var(--a-2) !important; }
.fp-lead { font-size: 1.125rem; line-height: var(--zh-text); color: var(--text-matt); max-width: 36rem; }
.fp-hinweis { color: var(--text-matt); font-size: var(--gr-klein); margin-top: var(--a-6) !important; }
.fp-star { font-style: normal; background: var(--fd-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-symbol { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r-innen); background: var(--akzent-flaeche); color: var(--akzent); }

/* Knöpfe: Hauptknopf Kupfer als Pille, Zweitknopf als Linie */
.fp-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-8); }
.fp-knopf {
	display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 var(--a-6);
	border: 1px solid var(--knopf-haupt); border-radius: var(--r-rund); background: var(--knopf-haupt); color: var(--knopf-haupt-text);
	font: var(--gewicht-ui) 1rem/1 var(--schrift-text); text-decoration: none; cursor: pointer;
	transition: background-color var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig), color var(--dauer-hover) var(--kurve-ruhig), transform var(--dauer-hover) var(--kurve-ruhig);
}
.fp-knopf:hover { background: var(--knopf-haupt-hover); border-color: var(--knopf-haupt-hover); color: var(--knopf-haupt-text); transform: translateY(var(--hover-knopf)); }
.fp-knopf--linie { background: transparent; border-color: var(--knopf-neben-rand); color: var(--text); }
.fp-knopf--linie:hover { background: var(--flaeche-tief); border-color: var(--akzent); color: var(--text); }
.fp :focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.fp-textlink { display: inline-block; margin-top: var(--a-4); color: var(--text); font-weight: var(--gewicht-ui); text-decoration: none; border-bottom: 1px solid var(--akzent); transition: color var(--dauer-hover) var(--kurve-ruhig); }
.fp-textlink:hover { color: var(--akzent); }

/* Einstieg (immer dunkel) */
.fp-hero { background: var(--grund); color: var(--text); padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.fp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.fp-hero__titel { font-size: var(--gr-display); line-height: var(--zh-display); margin: var(--a-4) 0 var(--a-6); }
.fp-huerden { margin-top: var(--a-6) !important; color: var(--text-matt); font-size: var(--gr-klein); }
/* Einstieg: Bühne aus drei Karten (Musterdaten), keine Screenshots */
.fp-buehne { position: relative; min-height: 28rem; }
.fp-b { position: absolute; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--tiefe-3); padding: var(--a-6); }
.fp-b__label { font-size: var(--gr-label); font-weight: var(--gewicht-ui); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--text-label); }
.fp-b__name { font-size: var(--gr-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); margin-top: var(--a-2) !important; }
.fp-b__unter { font-size: var(--gr-klein); color: var(--text-matt); }
.fp-b--kunde { left: 0; top: 0; width: 64%; }
.fp-b__schritte { list-style: none; margin: var(--a-5) 0 0; padding: var(--a-5) 0 0; border-top: 1px solid var(--linie); display: grid; gap: var(--a-3); }
.fp-b__schritte li { display: flex; align-items: center; gap: var(--a-3); font-size: var(--gr-klein); color: var(--text-matt); }
.fp-b__schritte li.ist-fertig { color: var(--text); }
.fp-b__punkt { position: relative; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; border: 1.5px solid var(--linie-stark); }
.ist-fertig .fp-b__punkt { background: var(--knopf-haupt); border-color: var(--knopf-haupt); color: var(--knopf-haupt-text); }
.ist-aktiv .fp-b__punkt { border-color: var(--akzent); }
.ist-aktiv .fp-b__punkt::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--akzent); }
.ist-aktiv { font-weight: var(--gewicht-ui); }
.fp-haken-ico { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fp-b--vermoegen { right: 0; top: 11rem; width: 46%; }
.fp-b__zahl { font-size: 2rem; font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); line-height: 1.1; margin-top: var(--a-2) !important; color: var(--text); }
.fp-b__kurve { display: block; width: 100%; height: auto; aspect-ratio: 200 / 60; margin-top: var(--a-4); overflow: visible; }
.fp-b__linie { fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fp-b__flaeche { fill: var(--akzent-flaeche); }
.fp-b--pruefung { left: 10%; bottom: 0; display: flex; align-items: center; gap: var(--a-4); padding: var(--a-4) var(--a-6) var(--a-4) var(--a-4); }
.fp-b__siegel { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--akzent-flaeche); color: var(--akzent); }
.fp-b__siegel .fp-haken-ico { width: 1.25rem; height: 1.25rem; }
.fp-b__titel { font-weight: var(--gewicht-titel); color: var(--text); }

/* Bewegung nur beim Laden (Höhepunkt): Karten schweben ein, Haken setzen sich, Kurve zeichnet sich */
@media (prefers-reduced-motion: no-preference) {
	.js .fp-b { animation: fp-ein var(--dauer-lang) var(--kurve-ruhig) both; }
	.js .fp-b--kunde { animation-delay: 150ms; }
	.js .fp-b--vermoegen { animation-delay: 350ms; }
	.js .fp-b--pruefung { animation-delay: 1500ms; }
	.js .ist-fertig .fp-b__punkt { animation: fp-haken var(--dauer-kurz) var(--kurve-feder) both; animation-delay: calc(700ms + var(--i) * 260ms); }
	.js .ist-aktiv .fp-b__punkt::after { animation: fp-puls 1.6s var(--kurve-gleich) 1.6s 3 both; }
	.js .fp-b__linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fp-linie var(--dauer-buehne) var(--kurve-ruhig) 600ms forwards; }
	.js .fp-b__flaeche { animation: fp-aus var(--dauer-lang) var(--kurve-ruhig) 1300ms both; }
}
@keyframes fp-ein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fp-haken { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fp-puls { 50% { transform: scale(1.6); opacity: .5; } }
@keyframes fp-linie { to { stroke-dashoffset: 0; } }
@keyframes fp-aus { from { opacity: 0; } to { opacity: 1; } }

/* Klickbares: weicher Hover in 300 ms (REGELN 3.7) */
.fp-auf { position: relative; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; border: 1px solid var(--linie-stark); transition: transform var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig), background-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-auf::before, .fp-auf::after { content: ""; position: absolute; left: 50%; top: 50%; width: .65rem; height: 1.5px; margin: -.75px 0 0 -.325rem; background: var(--akzent); }
.fp-auf::after { transform: rotate(90deg); transition: transform var(--dauer-hover) var(--kurve-ruhig); }
details[open] > summary .fp-auf::after { transform: rotate(0deg); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Vertrauensleiste */
.fp-leiste { background: var(--grund-tief); border-block: 1px solid var(--linie); }
.fp-leiste__liste { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-6); padding-block: var(--a-6); }
.fp-leiste__liste li { display: flex; align-items: center; gap: var(--a-3); color: var(--text-matt); font-size: var(--gr-klein); font-weight: var(--gewicht-ui); }
.fp-leiste__liste .f-ico { color: var(--akzent); }

/* Abschnitte */
.fp-abschnitt { padding-block: clamp(4rem, 8vw, 6.5rem); background: var(--grund); }
.fp-abschnitt--flaeche { background: var(--grund-tief); }
.fp-zwei { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

/* Karten (nicht klickbar: kein Hover) */
.fp-karten { list-style: none; margin: var(--a-10) 0 0; padding: 0; display: grid; gap: var(--a-5); }
.fp-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fp-haken { list-style: none; margin: var(--a-6) 0 0; padding: var(--a-6) 0 0; border-top: 1px solid var(--linie); display: grid; gap: var(--a-3); }
.fp-haken li { position: relative; padding-left: 1.75rem; color: var(--text); }
.fp-haken li::before { content: ""; position: absolute; left: .1rem; top: .38em; width: .8rem; height: .42rem; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }

/* Leistungen: aufklappbar */
.fp-leistungen { display: grid; gap: var(--a-3); }
.fp-leistung { border: 1px solid var(--linie); border-radius: var(--r-innen); background: var(--grund); transition: border-color var(--dauer-hover) var(--kurve-ruhig), box-shadow var(--dauer-hover) var(--kurve-ruhig), background-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-leistung summary { display: flex; align-items: center; gap: var(--a-4); padding: var(--a-4) var(--a-5); cursor: pointer; }
.fp-leistung__kopf { flex: 1; display: grid; gap: var(--a-1); }
.fp-leistung__kopf b { font-size: var(--gr-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); transition: color var(--dauer-hover) var(--kurve-ruhig); }
.fp-leistung__kopf small { font-size: var(--gr-klein); line-height: var(--zh-klein); color: var(--text-matt); }
.fp-leistung:hover { border-color: var(--akzent-rand); box-shadow: var(--tiefe-1); }
.fp-leistung:hover .fp-leistung__kopf b { color: var(--akzent); }
.fp-leistung:hover .fp-auf { border-color: var(--akzent); background: var(--akzent-flaeche); }
.fp-leistung[open] { border-color: var(--akzent-rand); background: var(--flaeche); box-shadow: var(--tiefe-1); }
.fp-leistung .fp-symbol { transition: background-color var(--dauer-hover) var(--kurve-ruhig), color var(--dauer-hover) var(--kurve-ruhig); }
.fp-leistung[open] .fp-symbol { background: var(--knopf-haupt); color: var(--knopf-haupt-text); }
.fp-leistung__mehr { margin: 0 var(--a-5) var(--a-5) calc(var(--a-5) + 2.75rem + var(--a-4)); padding-top: var(--a-4); }
.fp-zitat { margin: var(--a-10) 0 0; padding: var(--a-6) var(--a-8); border-radius: var(--r-innen); background: var(--flaeche); border: 1px solid var(--linie); }
.fp-zitat p { font-size: 1.25rem; line-height: 1.4; color: var(--text); font-weight: var(--gewicht-ui); }

/* Schritte: klickbare Kacheln */
.fp-schritte { list-style: none; margin: var(--a-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-5); align-items: start; }
.fp-schritt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); transition: transform var(--dauer-hover) var(--kurve-ruhig), box-shadow var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-schritt summary { display: grid; gap: var(--a-2); padding: var(--a-8); cursor: pointer; }
.fp-schritt summary b { font-size: var(--gr-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); margin-top: var(--a-3); }
.fp-schritt summary small { font-size: 1rem; line-height: var(--zh-text); color: var(--text-matt); }
.fp-schritt__nr { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--knopf-haupt); color: var(--knopf-haupt-text); font-weight: var(--gewicht-titel); transition: transform var(--dauer-hover) var(--kurve-ruhig); }
.fp-schritt__mehr { display: inline-flex; align-items: center; gap: var(--a-3); margin-top: var(--a-4); font-size: var(--gr-klein); font-weight: var(--gewicht-ui); color: var(--akzent); }
.fp-schritt .fp-haken { margin: 0 var(--a-8) var(--a-8); }
.fp-schritt:hover { transform: translateY(var(--hover-karte)); box-shadow: var(--tiefe-2); border-color: var(--akzent-rand); }
.fp-schritt:hover .fp-schritt__nr { transform: scale(1.08); }
.fp-schritt:hover .fp-auf { border-color: var(--akzent); background: var(--akzent-flaeche); }
.fp-schritt[open] { border-color: var(--akzent-rand); box-shadow: var(--tiefe-2); }
.fp-schritt[open] .fp-schritt__mehr { color: var(--text-matt); }

/* Klickbare Karten (Stärken, Wege): Hover hebt 6px, Lichtrand folgt der Maus */
.fp-karten { align-items: start; }
.fp-klick, .fp-schritt, .fp-leistung { position: relative; isolation: isolate; }
.fp-klick::before, .fp-schritt::before, .fp-leistung::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
	background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), var(--akzent-flaeche), transparent 70%);
	transition: opacity var(--dauer-hover) var(--kurve-ruhig);
}
.fp-klick:hover::before, .fp-schritt:hover::before, .fp-leistung:hover::before { opacity: 1; }
.fp-klick { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--tiefe-1); cursor: pointer; transition: transform var(--dauer-hover) var(--kurve-ruhig), box-shadow var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-klick:hover { transform: translateY(var(--hover-karte)); box-shadow: var(--tiefe-2); border-color: var(--akzent-rand); }
.fp-klick[open], .fp-klick.ist-offen { border-color: var(--akzent-rand); box-shadow: var(--tiefe-2); }
.fp-klick > summary { display: grid; gap: var(--a-2); padding: var(--a-8); cursor: pointer; }
.fp-klick > summary b { font-size: var(--gr-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); margin-top: var(--a-3); }
.fp-klick > summary small { font-size: 1rem; line-height: var(--zh-text); color: var(--text-matt); }
.fp-klick > summary .fp-symbol { transition: background-color var(--dauer-hover) var(--kurve-ruhig), color var(--dauer-hover) var(--kurve-ruhig), transform var(--dauer-hover) var(--kurve-ruhig); }
.fp-klick:hover > summary .fp-symbol, .fp-klick[open] > summary .fp-symbol { background: var(--knopf-haupt); color: var(--knopf-haupt-text); transform: rotate(-6deg); }
details.fp-klick > .fp-haken { margin: 0 var(--a-8) var(--a-8); }
.fp-klick__mehr { display: inline-flex; align-items: center; gap: var(--a-3); margin-top: var(--a-4); font-size: var(--gr-klein); font-weight: var(--gewicht-ui); color: var(--akzent); cursor: pointer; }
.fp-klick:hover .fp-auf { border-color: var(--akzent); background: var(--akzent-flaeche); }
.fp-weg { padding: var(--a-8); }
.fp-weg .fp-label { margin: 0; }
.fp-weg h3 { font-size: var(--gr-h2); margin: var(--a-3) 0 var(--a-2); }
.fp-klick__text { color: var(--text-matt); line-height: var(--zh-text); }
.fp-weg__ablauf { margin-top: var(--a-6); padding-top: var(--a-5); border-top: 1px solid var(--linie); }
.fp-weg__ablauf > summary { margin-top: 0; }
.fp-ablauf { list-style: none; margin: var(--a-5) 0 var(--a-6); padding: 0; display: grid; gap: var(--a-3); counter-reset: ab; }
.fp-ablauf li { counter-increment: ab; display: flex; gap: var(--a-3); align-items: baseline; color: var(--text); line-height: var(--zh-text); }
.fp-ablauf li::before { content: counter(ab); flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--akzent-flaeche); color: var(--akzent); font-size: var(--gr-mikro); font-weight: var(--gewicht-titel); }

/* Linke Spalte läuft mit, Prüfstufen füllen sie */
.fp-mitlaufen { position: sticky; top: calc(var(--f-header-h, 80px) + var(--a-8)); }
.fp-stufen { list-style: none; margin: var(--a-5) 0 0; padding: var(--a-5) 0 0; border-top: 1px solid var(--linie); display: grid; gap: var(--a-3); }
.fp-stufen li { display: flex; align-items: center; gap: var(--a-3); color: var(--text-matt); font-size: .9375rem; }
.fp-stufen span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: var(--r-klein); background: var(--akzent-flaeche); color: var(--akzent); font-size: var(--gr-mikro); font-weight: var(--gewicht-titel); }

/* Vorschau der Investmentanalyse zum Durchklicken */
.fp-slider { min-width: 0; }
.fp-slider__bahn { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: start; gap: var(--a-4); overflow-x: auto; overflow-y: hidden; transition: height var(--dauer-mittel) var(--kurve-ruhig); scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--r-karte); }
.fp-slider__bahn::-webkit-scrollbar { display: none; }
.fp-slider__bahn:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }
.fp-slide { margin: 0; scroll-snap-align: start; display: grid; gap: var(--a-3); }
.fp-slide img { display: block; width: 100%; height: auto; border-radius: var(--r-karte); border: 1px solid var(--linie); }
.fp-slide figcaption { font-size: var(--gr-klein); color: var(--text-matt); text-align: center; }
.fp-slider__steuer { display: flex; align-items: center; justify-content: center; gap: var(--a-4); margin-top: var(--a-4); }
.fp-slider__pfeil { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--knopf-neben-rand); background: transparent; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background-color var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig), transform var(--dauer-hover) var(--kurve-ruhig); }
.fp-slider__pfeil:hover { background: var(--akzent-flaeche); border-color: var(--akzent); transform: translateY(var(--hover-knopf)); }
.fp-slider__pfeil[disabled] { opacity: .35; cursor: default; transform: none; background: transparent; }
.fp-slider__punkte { display: flex; gap: var(--a-2); }
.fp-slider__punkte button { width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: var(--r-rund); background: var(--linie-stark); cursor: pointer; transition: width var(--dauer-hover) var(--kurve-ruhig), background-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-slider__punkte button:hover { background: var(--akzent-rand); }
.fp-slider__punkte button[aria-current="true"] { width: 1.75rem; background: var(--akzent); }

/* Interaktives Vermögensdiagramm (Werte aus der echten Analyse der Musterwohnung) */
.fp-diagramm { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: var(--a-6); }
.fp-diagramm__titel { font-size: var(--gr-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); }
.fp-diagramm__unter { font-size: var(--gr-klein); color: var(--text-matt); }
.fp-diagramm__legende { list-style: none; margin: var(--a-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); font-size: var(--gr-mikro); font-weight: var(--gewicht-ui); color: var(--text-matt); }
.fp-diagramm__legende li { display: flex; align-items: center; gap: var(--a-2); }
.fp-diagramm__legende li::before { content: ""; width: 1.25rem; border-top: 2.5px solid; }
.fp-diagramm__legende .ist-wert::before { border-top-style: dashed; color: var(--text-matt); }
.fp-diagramm__legende .ist-schuld::before { border-top-style: dotted; border-top-width: 3px; color: var(--geld); }
.fp-diagramm__legende .ist-netto::before { color: var(--akzent); border-top-width: 3px; }
.fp-diagramm__flaeche { position: relative; margin-top: var(--a-3); }
.fp-diagramm svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.fp-diagramm .raster { stroke: var(--linie); stroke-width: 1; }
.fp-diagramm .achse { fill: var(--text-label); font: var(--gewicht-text) 11px var(--schrift-text); font-variant-numeric: tabular-nums; }
.fp-diagramm .reihe { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fp-diagramm .reihe--wert { stroke: var(--text-matt); stroke-width: 2.5; stroke-dasharray: 8 6; }
.fp-diagramm .reihe--schuld { stroke: var(--geld); stroke-width: 3; stroke-dasharray: .1 7; }
.fp-diagramm .reihe--netto { stroke: var(--akzent); stroke-width: 3.5; }
.fp-diagramm .netto-flaeche { fill: var(--akzent-flaeche); }
.fp-diagramm .zeiger { stroke: var(--linie-stark); stroke-width: 1; opacity: 0; transition: opacity var(--dauer-sofort); }
.fp-diagramm .punkt { stroke: var(--flaeche); stroke-width: 2; opacity: 0; transition: opacity var(--dauer-sofort); }
.fp-diagramm .punkt--wert { fill: var(--text-matt); }
.fp-diagramm .punkt--schuld { fill: var(--geld); }
.fp-diagramm .punkt--netto { fill: var(--akzent); }
.fp-diagramm.ist-aktiv .zeiger, .fp-diagramm.ist-aktiv .punkt { opacity: 1; }
.fp-tipp { position: absolute; top: 0; z-index: 2; min-width: 11rem; padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--r-innen); background: var(--flaeche-hoch); box-shadow: var(--tiefe-3); font-size: var(--gr-klein); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--dauer-sofort), transform var(--dauer-kurz) var(--kurve-ruhig); }
.fp-diagramm.ist-aktiv .fp-tipp { opacity: 1; transform: none; }
.fp-tipp b { display: block; margin-bottom: var(--a-1); color: var(--text); }
.fp-tipp dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: var(--a-1) var(--a-4); }
.fp-tipp dt { color: var(--text-matt); }
.fp-tipp dd { margin: 0; text-align: right; color: var(--text); font-weight: var(--gewicht-ui); font-variant-numeric: tabular-nums; }
.fp-tipp .ist-netto { color: var(--akzent); }
@media (prefers-reduced-motion: no-preference) {
	.js .fp-diagramm .reihe--netto { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.js .fp-diagramm.ist-gezeichnet .reihe--netto { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dauer-buehne) var(--kurve-ruhig); }
	.js .fp-diagramm.ist-fertig .reihe--netto { stroke-dasharray: none; transition: none; }
}

/* Mini-Rechner (stark vereinfacht) */
.fp-mini__regler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4) var(--a-6); margin-top: var(--a-5); }
.fp-mini__feld { display: grid; gap: var(--a-2); font-size: var(--gr-klein); color: var(--text-matt); }
.fp-mini__feld > span { display: flex; justify-content: space-between; gap: var(--a-3); }
.fp-mini__feld output { color: var(--text); font-weight: var(--gewicht-ui); }
.fp-mini__feld input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; margin: 0; background: transparent; cursor: pointer; }
.fp-mini__feld input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-rund); background: linear-gradient(to right, var(--akzent) var(--fuellung, 50%), var(--linie-stark) var(--fuellung, 50%)); }
.fp-mini__feld input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-rund); background: var(--linie-stark); }
.fp-mini__feld input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-rund); background: var(--akzent); }
.fp-mini__feld input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -7px; border-radius: 50%; background: var(--knopf-haupt); border: 3px solid var(--flaeche-hoch); box-shadow: var(--tiefe-1); transition: transform var(--dauer-hover) var(--kurve-ruhig); }
.fp-mini__feld input[type="range"]::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--knopf-haupt); border: 3px solid var(--flaeche-hoch); }
.fp-mini__feld input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.fp-mini__feld input[type="range"]:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--r-klein); }
.fp-mini__ergebnis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); margin-top: var(--a-5); }
.fp-mini__ergebnis > div { display: grid; gap: var(--a-1); padding: var(--a-3) var(--a-4); border-radius: var(--r-innen); background: var(--grund-tief); border: 1px solid var(--linie); }
.fp-mini__ergebnis span { font-size: var(--gr-mikro); color: var(--text-matt); }
.fp-mini__ergebnis b { font-size: 1.375rem; font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); }
.fp-mini__ergebnis .fp-mini__star { color: var(--akzent); }
.fp-mini__annahmen { margin-top: var(--a-4); font-size: var(--gr-mikro); color: var(--text-matt); }
.fp-mini__annahmen summary { cursor: pointer; font-weight: var(--gewicht-ui); color: var(--akzent); width: fit-content; transition: color var(--dauer-hover) var(--kurve-ruhig); }
.fp-mini__annahmen summary:hover { color: var(--text); }
.fp-mini__annahmen p { margin-top: var(--a-2) !important; line-height: var(--zh-klein); }

/* Werkzeuge mit Reitern (immer dunkel) */
.fp-werkzeuge { background: var(--grund); color: var(--text); padding-block: clamp(4rem, 8vw, 6.5rem); }
.fp-reiter { margin-top: var(--a-10); }
.fp-reiter__liste { display: flex; flex-wrap: wrap; gap: var(--a-2); padding: var(--a-1); border: 1px solid var(--linie); border-radius: var(--r-innen); background: var(--grund-tief); width: fit-content; max-width: 100%; }
.fp-reiter__knopf { display: inline-flex; align-items: center; gap: var(--a-2); min-height: 2.75rem; padding: 0 var(--a-5); border: 1px solid transparent; border-radius: var(--r-klein); background: transparent; color: var(--text-matt); font: var(--gewicht-ui) .9375rem var(--schrift-text); cursor: pointer; transition: background-color var(--dauer-hover) var(--kurve-ruhig), color var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-reiter__knopf .f-ico { width: 1.125rem; height: 1.125rem; color: var(--akzent); }
.fp-reiter__knopf:hover { background: var(--flaeche); color: var(--text); }
.fp-reiter__knopf[aria-selected="true"] { background: var(--flaeche-hoch); border-color: var(--akzent-rand); color: var(--text); }
.fp-reiter__feld { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: var(--a-8); }
.fp-reiter__feld[hidden] { display: none; }
.fp-reiter__feld:not([hidden]) { animation: fp-ein var(--dauer-mittel) var(--kurve-ruhig); }
.fp-reiter__bild { margin: 0; border-radius: var(--r-karte); overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--tiefe-3); }
.fp-reiter__bild img { display: block; width: 100%; height: auto; }
.fp-reiter__bild--papier { max-width: 22rem; justify-self: center; border-radius: var(--r-klein); }
.fp-reiter__text h3 { font-size: var(--gr-h2); margin: 0 0 var(--a-3); }
.fp-reiter__text > p { color: var(--text-matt); line-height: var(--zh-text); }
.fp-reiter__charts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-4); }
.fp-reiter__charts li { display: grid; gap: var(--a-2); font-size: var(--gr-klein); font-weight: var(--gewicht-ui); color: var(--text-matt); }
.fp-reiter__charts img { display: block; width: 100%; height: auto; border-radius: var(--r-klein); border: 1px solid var(--linie); }

/* Team */
.fp-team { list-style: none; margin: var(--a-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-5); }
.fp-person { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: var(--a-3) var(--a-3) var(--a-6); }
.fp-person img, .fp-person > .fp-person__ohne { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-innen); }
.fp-person img { display: block; }
.fp-person h3 { font-size: var(--gr-titel); margin: var(--a-4) var(--a-2) var(--a-1); }
.fp-person p { margin-inline: var(--a-2); color: var(--akzent); font-size: var(--gr-klein); }
.fp-person__ohne { display: grid; place-items: center; background: var(--akzent-flaeche); color: var(--akzent); font-size: 2.5rem; font-weight: var(--gewicht-titel); }

/* Video (erscheint erst, wenn eines hinterlegt ist) */
.fp-video { display: block; width: 100%; max-width: 56rem; margin-top: var(--a-10); border-radius: var(--r-karte); background: var(--flaeche); }

/* Fragen */
.fp-fragen details { border-top: 1px solid var(--linie); }
.fp-fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fp-fragen summary { list-style: none; display: flex; justify-content: space-between; gap: var(--a-4); padding: var(--a-5) 0; cursor: pointer; font-size: 1.0625rem; font-weight: var(--gewicht-ui); color: var(--text); transition: color var(--dauer-hover) var(--kurve-ruhig); }
.fp-fragen summary:hover { color: var(--akzent); }
.fp-fragen summary::-webkit-details-marker { display: none; }
.fp-fragen summary::after { content: "+"; color: var(--akzent); font-size: 1.5rem; line-height: 1; transition: transform var(--dauer-kurz) var(--kurve-ruhig); }
.fp-fragen details[open] summary::after { transform: rotate(45deg); }
.fp-fragen details p { padding-bottom: var(--a-5); color: var(--text-matt); line-height: var(--zh-text); max-width: 44rem; }

/* Abschluss mit Formular (immer dunkel) */
.fp-abschluss { background: var(--grund); color: var(--text); padding-block: clamp(4rem, 8vw, 6.5rem); scroll-margin-top: var(--f-header-h, 80px); }
.fp-abschluss__text { position: sticky; top: calc(var(--f-header-h, 80px) + var(--a-8)); }
.fp-abschluss .fp-lead { margin-top: var(--a-5); }
.fp-formular { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--tiefe-3); scroll-margin-top: calc(var(--f-header-h, 80px) + 1rem); }
.fp-formular h3 { font-size: var(--gr-h2); margin: 0 0 var(--a-6); }
.fp-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4); }
.fp-feld { display: grid; gap: var(--a-2); }
.fp-feld span, .fp-wer legend { font-size: var(--gr-klein); font-weight: var(--gewicht-ui); color: var(--text-matt); }
.fp-feld input {
	min-height: 3rem; padding: 0 var(--a-4); border: 1px solid var(--linie-stark); border-radius: var(--r-klein);
	background: var(--grund); color: var(--text); font: var(--gewicht-text) 1rem var(--schrift-text);
	transition: border-color var(--dauer-sofort) var(--kurve-ruhig);
}
.fp-feld input:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px var(--akzent-flaeche); }
.fp-feld input[aria-invalid="true"] { border-color: var(--akzent); }
.fp-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fp-wer { border: 0; margin: var(--a-6) 0 0; padding: 0; }
.fp-wer legend { padding: 0; margin-bottom: var(--a-3); }
.fp-wer legend small { font-weight: var(--gewicht-text); color: var(--text-label); }
.fp-wer__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--a-3); }
.fp-wer__wahl { position: relative; display: grid; justify-items: center; gap: var(--a-2); padding: var(--a-3) var(--a-2); border: 1px solid var(--linie); border-radius: var(--r-innen); background: var(--grund); cursor: pointer; font-size: var(--gr-klein); font-weight: var(--gewicht-ui); color: var(--text); transition: border-color var(--dauer-hover) var(--kurve-ruhig), background-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-wer__wahl:hover { border-color: var(--akzent-rand); }
.fp-wer__wahl img, .fp-wer__wahl .fp-person__ohne { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; font-size: 1.25rem; }
.fp-wer__wahl input, .fp-wer__online input { position: absolute; opacity: 0; pointer-events: none; }
.fp-wer__wahl:has(input:checked) { border-color: var(--akzent); background: var(--akzent-flaeche); }
.fp-wer__wahl:has(input:focus-visible), .fp-wer__online:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.fp-wer__online { position: relative; display: block; margin-top: var(--a-3); padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--r-klein); cursor: pointer; font-size: var(--gr-klein); color: var(--text-matt); transition: border-color var(--dauer-hover) var(--kurve-ruhig); }
.fp-wer__online:hover { border-color: var(--akzent-rand); }
.fp-wer__online:has(input:checked) { border-color: var(--akzent); background: var(--akzent-flaeche); color: var(--text); }

.fp-zustimmung { display: flex; gap: var(--a-3); align-items: flex-start; margin: var(--a-6) 0; font-size: var(--gr-klein); line-height: var(--zh-klein); color: var(--text-matt); cursor: pointer; }
.fp-zustimmung input { width: 1.125rem; height: 1.125rem; margin-top: .1rem; flex: none; accent-color: var(--knopf-haupt); }
.fp-zustimmung a { color: var(--text); }
.fp-formular .fp-knopf { width: 100%; }
.fp-formular .fp-knopf[disabled] { opacity: .6; cursor: wait; transform: none; }
.fp-meldung { margin-top: var(--a-4) !important; font-size: var(--gr-klein); color: var(--text); }
.fp-meldung:empty { display: none; }
.fp-meldung.ist-fehler { color: var(--akzent); }
.fp-formular.ist-gesendet .fp-felder, .fp-formular.ist-gesendet .fp-wer, .fp-formular.ist-gesendet .fp-zustimmung, .fp-formular.ist-gesendet .fp-knopf { display: none; }
.fp-formular.ist-gesendet .fp-meldung { font-size: 1.125rem; line-height: 1.5; }

/* Feste Leiste am Handy */
.fp-mobil { display: none; }


/* Schmale Bildschirme */
@media (max-width: 1023px) {
	.fp-hero__grid, .fp-zwei { grid-template-columns: 1fr; }
	.fp-abschluss__text, .fp-mitlaufen { position: static; }
	.fp-leiste__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-karten--drei, .fp-schritte { grid-template-columns: 1fr; }
	.fp-reiter__feld { grid-template-columns: 1fr; }
	.fp-buehne { max-width: 34rem; }
}
@media (max-width: 767px) {
	.fp-wrap { padding-inline: var(--a-4); }
	.fp-karten--zwei { grid-template-columns: 1fr; }
	.fp-klick > summary, .fp-weg { padding: var(--a-6); }
	details.fp-klick > .fp-haken { margin: 0 var(--a-6) var(--a-6); }
	.fp-schritt summary { padding: var(--a-6); }
	.fp-schritt .fp-haken { margin: 0 var(--a-6) var(--a-6); }
	.fp-reiter__charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-mini__regler { grid-template-columns: 1fr; }
	.fp-diagramm { padding: var(--a-4); }
	.fp-reiter__knopf { padding: 0 var(--a-3); }
	.fp-leistung__mehr { margin-left: var(--a-5); }
	/* Szene am Handy: Karten untereinander, leicht versetzt */
	.fp-buehne { min-height: 0; display: flex; flex-direction: column; }
	.fp-b { position: relative; inset: auto; padding: var(--a-5); }
	.fp-b--kunde { width: 90%; }
	.fp-b--vermoegen { width: 72%; align-self: flex-end; margin-top: calc(-1 * var(--a-4)); }
	.fp-b--pruefung { align-self: flex-start; margin: calc(-1 * var(--a-3)) 0 0 var(--a-4); }
	.fp-b__zahl { font-size: 1.5rem; }
	.fp-felder { grid-template-columns: 1fr; }
	.fp-team { grid-template-columns: 1fr; max-width: 22rem; }
	.fp-mobil {
		display: flex; gap: var(--a-2); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
		padding: var(--a-3) var(--a-4) calc(var(--a-3) + env(safe-area-inset-bottom));
		background: var(--flaeche-glas); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linie);
		transform: translateY(110%); transition: transform var(--dauer-mittel) var(--kurve-ruhig);
	}
	.fp-mobil.ist-sichtbar { transform: none; }
	.fp-mobil .fp-knopf { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-klick:hover, .fp-slider__pfeil:hover, .fp-klick:hover > summary .fp-symbol { transform: none; }
	.fp-slider__bahn { scroll-behavior: auto; }
	.fp-knopf:hover, .fp-schritt:hover, .fp-schritt:hover .fp-schritt__nr { transform: none; }
	.js .fp-stufenwahl__knopf.f-reveal.is-in:hover, .fp-stufenwahl__knopf:hover { transform: none; }
	.fp-reiter__feld:not([hidden]) { animation: none; }
	.fp-mobil { transition: none; }
}

/* =========================================================
   Bausteine für die übrigen Seiten (Start, Unterseiten), 16.10.2026
   Gleiche Sprache wie oben: Rollen-Token, 3D-Kacheln (REGELN 3.15), Hover nur auf Klickbarem (3.7)
   ========================================================= */
.fp-abstand { margin-top: var(--a-5) !important; }
.fp-abstand-gross { margin-top: var(--a-10) !important; }
.fp-matt { color: var(--text-matt); line-height: var(--zh-text); }
.fp-text > * + * { margin-top: var(--a-4) !important; }
.fp-zwei--mitte { align-items: center; }
.fp-zwei--unten { align-items: end; }

/* Ruhende Kachel (nicht klickbar, kein Hover) */
.fp-kachel { background: var(--tiefe-flaeche); border: 1px solid transparent; border-radius: var(--r-karte); box-shadow: var(--tiefe-1); padding: var(--a-8); }
.fp-wert h3 { font-size: var(--gr-titel); line-height: var(--zh-titel); margin: var(--a-5) 0 var(--a-2); }
.fp-wert p { color: var(--text-matt); line-height: var(--zh-text); }
.fp-karten--fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Ruhende Kacheln und Link-Kacheln einer Reihe gleich hoch */
.fp-karten:has(> .fp-kachel), .fp-karten:has(> li > a.fp-kontakt) { align-items: stretch; }
.fp-karten--fuenf .fp-kachel { padding: var(--a-6); }

/* Bilder in Kacheln (Fotos bleiben unverändert, dunkel mit feinem Rand) */
.fp-bild { margin: 0; overflow: hidden; border-radius: var(--r-karte); border: 1px solid var(--linie); box-shadow: var(--tiefe-3); background: var(--flaeche); }
.fp-bild img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fp-bild--hoch img { aspect-ratio: 4 / 5; }

/* Pille im Einstieg (klickbar) */
.fp-pille { display: inline-flex; align-items: center; gap: var(--a-2); min-height: 2.25rem; padding: 0 var(--a-4); border: 1px solid var(--linie); border-radius: var(--r-rund); background: var(--flaeche); color: var(--text); font-size: var(--gr-klein); font-weight: var(--gewicht-ui); text-decoration: none; transition: border-color var(--dauer-hover) var(--kurve-ruhig), transform var(--dauer-hover) var(--kurve-ruhig); }
.fp-pille:hover { border-color: var(--akzent); transform: translateY(var(--hover-knopf)); }
.fp-pille__punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--akzent); }

/* Einstieg Startseite: Bühne mit Musterrechnung und Objektprüfung */
.fp-hero--start .fp-hero__titel { max-width: 14ch; }
.fp-hero__team { display: flex; align-items: center; gap: var(--a-4); margin-top: var(--a-8); color: var(--text-matt); font-size: var(--gr-klein); }
.fp-hero__team b { color: var(--text); }
.fp-avatare { display: flex; flex: none; }
.fp-avatare img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--grund); }
.fp-avatare img + img { margin-left: -.75rem; }
.fp-buehne--start { min-height: 37rem; }
.fp-b--analyse { left: 0; top: 0; width: 76%; }
.fp-b--objekt { right: 0; bottom: 0; width: 46%; padding: var(--a-5); }
.fp-b__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); }
.fp-b__tag { padding: var(--a-1) var(--a-2); border-radius: var(--r-klein); background: var(--flaeche-tief); color: var(--text-matt); font-size: var(--gr-mikro); font-weight: var(--gewicht-ui); }
.fp-b__ok { color: var(--akzent); font-size: var(--gr-mikro); font-weight: var(--gewicht-ui); }
.fp-b--analyse .fp-b__unter { margin-top: var(--a-4) !important; }
.fp-b__zahl--gross { font-size: clamp(2rem, 3.4vw, 2.75rem); } /* kein Verlauf: der Star der Ansicht ist die Überschrift (REGELN 3.9) */
.fp-b__achse { display: flex; justify-content: space-between; margin-top: var(--a-2); font-size: var(--gr-mikro); color: var(--text-label); }
.fp-b__werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); margin: var(--a-5) 0 0; padding-top: var(--a-4); border-top: 1px solid var(--linie); }
.fp-b__werte dt { font-size: var(--gr-mikro); color: var(--text-matt); }
.fp-b__werte dd { margin: var(--a-1) 0 0; font-weight: var(--gewicht-titel); color: var(--text); }
.fp-b--objekt .fp-b__schritte { margin-top: var(--a-3); padding-top: var(--a-3); grid-template-columns: 1fr 1fr; }
.fp-hero__fuss { margin-top: var(--a-8) !important; color: var(--text-label); font-size: var(--gr-mikro); }
@media (prefers-reduced-motion: no-preference) {
	.js .fp-b--analyse { animation-delay: 150ms; }
	.js .fp-b--objekt { animation-delay: 700ms; }
	.js .fp-b--objekt .ist-fertig .fp-b__punkt { animation-delay: calc(1100ms + var(--i) * 220ms); }
}

/* Einstieg Unterseiten: Text links, Bild rechts */
.fp-hero--seite .fp-hero__bild img { aspect-ratio: 4 / 3; }
.fp-hero--seite .fp-hero__titel { max-width: 16ch; }

/* Prüfprozess: vier Stufen zum Anklicken */
.fp-stufenwahl { margin-top: var(--a-10); }
.fp-stufenwahl__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-3); }
.fp-stufenwahl__knopf { display: flex; align-items: center; gap: var(--a-3); min-height: 4.5rem; padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--r-innen); background: var(--grund); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dauer-hover) var(--kurve-ruhig), background-color var(--dauer-hover) var(--kurve-ruhig), transform var(--dauer-hover) var(--kurve-ruhig), box-shadow var(--dauer-hover) var(--kurve-ruhig); }
.fp-stufenwahl__knopf { position: relative; isolation: isolate; }
.fp-stufenwahl__knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 0%), var(--akzent-flaeche), transparent 70%); transition: opacity var(--dauer-hover) var(--kurve-ruhig); }
/* .is-in der Einblend-Animation setzt transform: none mit höherer Spezifität, daher hier verstärkt */
.fp-stufenwahl__knopf:hover, .js .fp-stufenwahl__knopf.f-reveal.is-in:hover { border-color: var(--akzent-rand); box-shadow: var(--tiefe-2); transform: translateY(var(--hover-knopf)); transition-delay: 0s; transition-duration: var(--dauer-hover); }
.fp-stufenwahl__knopf:hover::before { opacity: 1; }
.fp-stufenwahl__knopf:hover .fp-stufenwahl__txt b { color: var(--akzent); }
.fp-stufenwahl__knopf:hover .fp-stufenwahl__nr { background: var(--knopf-haupt); color: var(--knopf-haupt-text); }
.fp-stufenwahl__knopf[aria-selected="true"] { border-color: var(--akzent-rand); background: var(--flaeche-hoch); box-shadow: var(--tiefe-1); }
.fp-stufenwahl__nr { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--r-klein); background: var(--akzent-flaeche); color: var(--akzent); font-size: var(--gr-klein); font-weight: var(--gewicht-titel); transition: background-color var(--dauer-hover) var(--kurve-ruhig), color var(--dauer-hover) var(--kurve-ruhig); }
.fp-stufenwahl__knopf[aria-selected="true"] .fp-stufenwahl__nr { background: var(--knopf-haupt); color: var(--knopf-haupt-text); }
.fp-stufenwahl__txt { display: grid; gap: 2px; }
.fp-stufenwahl__txt b { font-size: .9375rem; font-weight: var(--gewicht-titel); line-height: var(--zh-titel); transition: color var(--dauer-hover) var(--kurve-ruhig); }
.fp-stufenwahl__txt small { font-size: var(--gr-mikro); color: var(--text-matt); }
.fp-stufenwahl .fp-reiter__feld { margin-top: var(--a-6); }
.fp-reiter__text .fp-symbol { margin-bottom: var(--a-4); }

/* Ablauf: Nummer über dem Titel */
.fp-leistung__nr { font-size: var(--gr-label); font-weight: var(--gewicht-ui); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--akzent); }

/* Bildband mit Leitsatz (ruhig, ohne Parallaxe) */
.fp-band { position: relative; overflow: hidden; isolation: isolate; color: var(--text); padding-block: clamp(5rem, 12vw, 9rem); }
.fp-band__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.fp-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--grund) 88%, transparent) 0%, color-mix(in srgb, var(--grund) 55%, transparent) 100%); }
.fp-band__zitat { margin: 0; max-width: 34rem; }
.fp-band__zitat p { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.2; font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); }
.fp-band__zitat cite { display: block; margin-top: var(--a-5); font-style: normal; font-size: var(--gr-klein); color: var(--text-matt); }

/* Haltung: großer Satz auf Dunkel */
.fp-haltung { background: var(--grund); }
.fp-gross { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.15; font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); max-width: 22ch; }
.fp-haltung__text { display: grid; gap: var(--a-4); line-height: var(--zh-text); }

/* Vergütung als ruhige Tabelle */
.fp-tabelle { margin: 0; padding: var(--a-3) var(--a-8); }
.fp-tabelle > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-4); padding: var(--a-5) 0; border-bottom: 1px solid var(--linie); }
.fp-tabelle > div:last-child { border-bottom: 0; }
.fp-tabelle dt { color: var(--text-matt); }
.fp-tabelle dd { margin: 0; font-weight: var(--gewicht-titel); color: var(--text); text-align: right; }
.fp-tabelle .ist-haupt dd { font-size: var(--gr-unterzeile); color: var(--akzent-gross); }

/* Team mit Kurztext und Zitat */
.fp-person--lang { padding-bottom: var(--a-6); display: flex; flex-direction: column; } /* Azad 23.10.2026: Linie und Zitat auf gleicher Höhe */
.fp-person--lang .fp-person__text { margin: var(--a-3) var(--a-2) 0; flex-grow: 1; color: var(--text-matt); font-size: .9375rem; line-height: var(--zh-text); }
.fp-person__zitat { margin: var(--a-4) var(--a-2) 0; padding-top: var(--a-4); border-top: 1px solid var(--linie); color: var(--text); font-size: .9375rem; line-height: var(--zh-text); }
.fp-team .fp-person--lang { box-shadow: var(--tiefe-1); }

/* Ratgeber-Vorschau */
.fp-kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--a-4); }
.fp-kopfzeile .fp-textlink { margin-top: 0; }
.fp-artikel { margin-top: var(--a-10); }

/* Aufruf am Ende */
.fp-aufruf__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--a-8); align-items: end; }
.fp-aufruf__knoepfe { justify-content: flex-end; margin-top: 0; }

/* Kontakt: ganze Kachel ist der Link */
a.fp-kontakt { display: grid; gap: var(--a-2); height: 100%; padding: var(--a-8); color: var(--text); text-decoration: none; }
a.fp-kontakt b { font-size: var(--gr-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); margin-top: var(--a-3); }
a.fp-kontakt small { font-size: 1rem; line-height: var(--zh-text); color: var(--text-matt); }
a.fp-kontakt .fp-symbol { transition: background-color var(--dauer-hover) var(--kurve-ruhig), color var(--dauer-hover) var(--kurve-ruhig), transform var(--dauer-hover) var(--kurve-ruhig); }
a.fp-kontakt:hover .fp-symbol { background: var(--knopf-haupt); color: var(--knopf-haupt-text); transform: rotate(-6deg); }

/* Liste aus ruhigen Kacheln mit Symbol */
.fp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-3); }
.fp-liste .fp-kachel { display: flex; gap: var(--a-4); align-items: flex-start; padding: var(--a-5) var(--a-6); }
.fp-liste h3 { font-size: var(--gr-titel); line-height: var(--zh-titel); margin: 0 0 var(--a-1); }
.fp-liste p { color: var(--text-matt); line-height: var(--zh-text); }
.fp-haken--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; border-top: 0; }

/* Merkmale einer Stelle als neutrale Chips (REGELN 3.12) */
.fp-merkmale { list-style: none; margin: var(--a-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-2); }
.fp-merkmale li { padding: var(--a-1) var(--a-3); border-radius: var(--r-klein); background: var(--flaeche-tief); color: var(--text-matt); font-size: 12px; font-weight: var(--gewicht-ui); }
.fp-hinweis a { color: var(--akzent); }

/* Rechner: Analyse groß */
.fp-reiter__feld--start { margin-top: 0; }

@media (max-width: 1023px) {
	.fp-buehne--start { max-width: 34rem; }
	.fp-stufenwahl__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-karten--fuenf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-aufruf__grid { grid-template-columns: 1fr; }
	.fp-aufruf__knoepfe { justify-content: flex-start; }
}
@media (max-width: 767px) {
	.fp-buehne--start { min-height: 0; }
	.fp-b--analyse { width: auto; align-self: stretch; }
	.fp-b--objekt { width: 82%; align-self: flex-end; margin-top: calc(-1 * var(--a-4)); }
	.fp-b__werte { grid-template-columns: 1fr 1fr; }
	.fp-stufenwahl__liste { grid-template-columns: 1fr; gap: var(--a-2); }
	.fp-stufenwahl__knopf { min-height: 0; padding: var(--a-2) var(--a-3); }
	.fp-karten--fuenf, .fp-haken--zwei { grid-template-columns: 1fr; }
	.fp-kachel, a.fp-kontakt { padding: var(--a-6); }
	.fp-tabelle { padding: var(--a-2) var(--a-5); }
	.fp-tabelle > div { flex-direction: column; gap: var(--a-1); }
	.fp-tabelle dd { text-align: left; }
	.fp-band::before { background: color-mix(in srgb, var(--grund) 78%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.fp-pille:hover, .fp-stufenwahl__knopf:hover, a.fp-kontakt:hover .fp-symbol { transform: none; }
}

/* ═══ Über uns, Kundenstimmen, Stellen-Hinweis (16.10.2026) ═══ */
.fp-abschnitt--knapp { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Zahlenleiste: eine Star-Kachel auf dem Verlauf (REGELN 3.9), daneben ruhige Kacheln. Kleiner Text oben links, große Zahl unten. */
.fp-zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: var(--a-5); align-items: stretch; }
.fp-zahlen > li { display: flex; flex-direction: column; gap: var(--a-2); padding: var(--a-6); border-radius: var(--r-karte); }
.fp-zahlen > li > b { order: 2; margin-top: auto; padding-top: var(--a-4); font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-zahlen > li > b small { font-size: var(--gr-text); font-weight: var(--gewicht-ui); letter-spacing: 0; margin-right: .3em; color: var(--text-matt); }
.fp-zahlen__text { color: var(--text-matt); font-size: var(--gr-klein); line-height: var(--zh-klein); }
.fp-zahlen__star { background: var(--fd-verlauf); box-shadow: var(--tiefe-star); }
.fp-zahlen__star .fp-label, .fp-zahlen__star .fp-zahlen__text, .fp-zahlen__star > b, .fp-zahlen__star > b small { color: var(--star-text); }
.fp-zahlen__star > b { font-size: clamp(2.5rem, 4.6vw, 3.5rem); }

/* Gründer: groß, Bild und Text nebeneinander, der zweite gespiegelt */
.fp-gruender { display: grid; gap: var(--a-6); margin-top: var(--a-10); }
.fp-gruender__karte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: var(--a-4); }
.fp-gruender__karte img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-innen); }
.fp-gruender__karte:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.fp-gruender__karte:nth-child(even) img { order: 2; }
.fp-gruender__text { padding: var(--a-4) var(--a-6) var(--a-4) 0; max-width: 64ch; }
.fp-gruender__karte:nth-child(even) .fp-gruender__text { padding: var(--a-4) 0 var(--a-4) var(--a-6); }
.fp-gruender__text h3 { font-size: var(--gr-h1); line-height: var(--zh-h1); margin: var(--a-2) 0 var(--a-5); }
.fp-gruender__text p { color: var(--text-matt); line-height: var(--zh-text); }
.fp-gruender__text .fp-label { color: var(--akzent); }
.fp-gruender__privat { margin-top: var(--a-5); padding-top: var(--a-5); border-top: 1px solid var(--linie); }
.fp-gruender__privat b { display: block; margin-bottom: var(--a-1); font-size: var(--gr-label); font-weight: var(--gewicht-ui); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--text-label); }
.fp-gruender__satz { margin: var(--a-6) 0 0; font-size: var(--gr-titel); line-height: var(--zh-titel); font-weight: var(--gewicht-titel); color: var(--text); }
.fp-mitglied { display: flex; gap: var(--a-6); align-items: center; margin-top: var(--a-6); padding: var(--a-6); }
.fp-mitglied img { width: 6rem; height: 6rem; flex: none; border-radius: 50%; object-fit: cover; }
.fp-mitglied h3 { font-size: var(--gr-titel); margin: var(--a-1) 0 var(--a-2); }
.fp-mitglied p:not(.fp-label) { color: var(--text-matt); line-height: var(--zh-text); }

/* Kundenstimmen (ruhig, nicht klickbar) */
.fp-stimmen { margin-top: var(--a-10); }
.fp-stimme figure { margin: 0; display: flex; flex-direction: column; gap: var(--a-6); height: 100%; }
.fp-stimme blockquote { margin: 0; flex: 1; }
.fp-stimme blockquote p { font-size: 1.0625rem; line-height: var(--zh-text); color: var(--text); }
.fp-stimme blockquote p::before { content: "„"; }
.fp-stimme blockquote p::after { content: "“"; }
.fp-stimme figcaption { display: flex; gap: var(--a-3); align-items: center; padding-top: var(--a-5); border-top: 1px solid var(--linie); }
.fp-stimme__bild { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 50%; background-repeat: no-repeat; background-color: var(--flaeche-tief); }
.fp-stimme figcaption b { display: block; font-weight: var(--gewicht-titel); color: var(--text); }
.fp-stimme figcaption small { display: block; font-size: var(--gr-klein); color: var(--text-matt); }

/* Stellen-Hinweis: ganze Kachel ist der Link */
a.fp-stelle { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--a-6); }
.fp-stelle__text { display: grid; gap: var(--a-1); }
a.fp-stelle b { margin-top: 0; }
.fp-stelle .fp-merkmale { margin-top: var(--a-3); }
.fp-merkmale > span { padding: var(--a-1) var(--a-3); border-radius: var(--r-klein); background: var(--flaeche-tief); color: var(--text-matt); font-size: 12px; font-weight: var(--gewicht-ui); }
a.fp-stelle .fp-klick__mehr { margin-top: 0; white-space: nowrap; }

@media (max-width: 1023px) {
	.fp-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-gruender__karte, .fp-gruender__karte:nth-child(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
	.fp-gruender__karte:nth-child(even) img { order: 0; }
	.fp-gruender__karte:nth-child(even) .fp-gruender__text { padding: var(--a-4) var(--a-6) var(--a-4) 0; }
}
@media (max-width: 767px) {
	.fp-zahlen { gap: var(--a-3); }
	.fp-zahlen__star, .fp-zahlen > li:last-child { grid-column: 1 / -1; }
	.fp-zahlen > li { padding: var(--a-5); }
	.fp-gruender__karte, .fp-gruender__karte:nth-child(even) { grid-template-columns: 1fr; gap: var(--a-2); }
	.fp-gruender__karte img { aspect-ratio: 1 / 1; }
	.fp-gruender__text, .fp-gruender__karte:nth-child(even) .fp-gruender__text { padding: var(--a-3) var(--a-2) var(--a-2); }
	.fp-mitglied { flex-direction: column; align-items: flex-start; gap: var(--a-4); }
	a.fp-stelle { grid-template-columns: 1fr; gap: var(--a-4); }
}

/* Rechner-Seite: Hypofy-Rechner als Fenster mit Reitern */
.fp-rechner { margin-top: var(--a-8); }
.fp-rechner__liste { width: 100%; }
.fp-rechner__feld { margin-top: var(--a-6); }
.fp-rechner__feld[hidden] { display: none; }
.fp-rechner__frage { margin: 0 0 var(--a-4); color: var(--text-matt); }
.fp-rechner__buehne { position: relative; min-height: 47.5rem; padding: var(--a-2); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); box-shadow: var(--tiefe-1); overflow: hidden; }
.fp-rechner__buehne iframe { position: relative; display: block; width: 100%; height: 47.5rem; border: 0; border-radius: var(--r-innen); background: var(--flaeche-hoch); }
.fp-rechner__laden { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-matt); font-size: var(--gr-klein); }
.fp-rechner__bruecke { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-4); margin-top: var(--a-6); padding: var(--a-5) var(--a-6); border: 1px solid var(--akzent-rand); border-radius: var(--r-karte); background: var(--akzent-flaeche); }
.fp-rechner__bruecke p { margin: 0; max-width: 40rem; }
.fp-rechner__anfrage .fp-rechner__buehne { margin-top: var(--a-8); }
@media (max-width: 720px) {
	.fp-rechner__liste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.fp-rechner__liste .fp-reiter__knopf { flex: none; }
	.fp-rechner__buehne { padding: 0; border-radius: var(--r-innen); }
	.fp-rechner__buehne, .fp-rechner__buehne iframe { min-height: 0; height: 56rem; }
	.fp-rechner__bruecke { padding: var(--a-5); }
}