/* Focustrend – Seite „Anfrage“ /anfrage/ (15.10.2026)
   Gehört zu wp-content/mu-plugins/ft-anfrage.php + ft-anfrage/seite.php + fta.js.
   Bewegung nur über transform/opacity. Die Schritte liegen übereinander in einer Zelle → die Karte springt beim Wechsel nicht. */

@property --fta-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Theme-Rahmen ---------- */
body.fta-seite .page_content_wrap { padding: 0 !important; }
body.fta-seite .page_content_wrap > .content_wrap,
body.fta-seite .page_content_wrap > .content_wrap_fullscreen { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
body.fta-seite .page_content_wrap .content { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }

/* ---------- Grundlagen ---------- */
.fta {
	--kopf: "Plus Jakarta Sans", system-ui, sans-serif;
	--fliess: "DM Sans", system-ui, sans-serif;
	--text: #aab0bd;
	--karte: #1c1c25;
	--feld: #15151c;
	--linie: rgba(255, 255, 255, .09);
	--lila: #8b7bff;
	--cyan: #22d3ee;
	--pink: #e879f9;
	position: relative;
	overflow-x: clip;
	background: #16161d;
	color: var(--text);
	font-family: var(--fliess);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.fta *, .fta *::before, .fta *::after { box-sizing: border-box; }
.fta h1, .fta h2, .fta h3 { margin: 0; padding: 0; font-family: var(--kopf); color: #fff; letter-spacing: -.025em; line-height: 1.15; text-transform: none; font-weight: 800; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
.fta p { margin: 0; padding: 0; }
.fta ul, .fta ol { list-style: none; margin: 0; padding: 0; }
.fta li { margin: 0; padding: 0; }
.fta li::before, .fta li::marker { content: none; }
.fta a { text-decoration: none; color: inherit; }
.fta a:hover, .fta a:focus { color: inherit; text-decoration: none; }
.fta svg { display: block; flex: none; }
.fta button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
.fta-svg { width: 22px; height: 22px; }
.fta a:focus-visible, .fta button:focus-visible, .fta label:focus-within { outline: none; }
.fta a:focus-visible, .fta button:focus-visible { box-shadow: 0 0 0 3px rgba(34, 211, 238, .55) !important; }
.fta-unsichtbar { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.fta-rahmen { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

.fta-verlauf {
	background: linear-gradient(90deg, #8b7bff, #22d3ee, #e879f9, #8b7bff) 0 0 / 600px 100% repeat-x;
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
	animation: fta-fluss 8s linear infinite;
}
@keyframes fta-fluss { to { background-position: 600px 0; } }

/* ---------- Kopf ---------- */
.fta-held { position: relative; isolation: isolate; padding: clamp(44px, 6vw, 84px) 0 clamp(36px, 4vw, 56px); text-align: center; }
.fta-held-grund { position: absolute; inset: 0 0 -400px; z-index: -1; overflow: hidden; pointer-events: none; }
.fta-aura { position: absolute; border-radius: 50%; }
.fta-aura.a1 { width: 720px; height: 720px; left: -200px; top: -360px; background: radial-gradient(circle, rgba(109, 92, 255, .32), transparent 62%); }
.fta-aura.a2 { width: 640px; height: 640px; right: -220px; top: -200px; background: radial-gradient(circle, rgba(34, 211, 238, .16), transparent 62%); }
.fta-aura.a3 { width: 600px; height: 600px; left: 30%; top: 260px; background: radial-gradient(circle, rgba(232, 121, 249, .1), transparent 62%); }
.fta-punkte { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 65%); }
.fta-oben { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #1f1f29; border: 1px solid var(--linie); color: #d6d9e0; font: 600 13px/1 var(--kopf); }
.fta-puls { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: fta-puls 2.2s ease-out infinite; }
@keyframes fta-puls { from { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } to { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }
.fta-held h1 { font-size: clamp(38px, 5.6vw, 70px); margin: 20px auto 16px; letter-spacing: -.035em; }
.fta .fta-einleitung { max-width: 640px; margin: 0 auto; font-size: 17.5px; color: #b8bdc9; }
.fta .fta-plaketten { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.fta-plaketten li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #1f1f29; border: 1px solid var(--linie); color: #e3e5ea; font: 600 14px/1 var(--kopf); }
.fta-plaketten .fta-svg { width: 18px; height: 18px; color: #9d90ff; }

/* ---------- Raster ---------- */
.fta-haupt { position: relative; padding-bottom: clamp(56px, 7vw, 96px); }
.fta-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 3vw, 40px); align-items: start; }

/* ---------- Karte mit dem Assistenten ---------- */
.fta-karte { position: relative; isolation: isolate; padding: clamp(22px, 3vw, 38px); border-radius: 28px; background: linear-gradient(170deg, #20202b, #191921); box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .95), 0 0 120px -60px rgba(124, 92, 255, .8); scroll-margin-top: 20px; }
.fta-karte-rand {
	position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--fta-w), rgba(139, 123, 255, .15), var(--lila), var(--cyan), rgba(232, 121, 249, .8), rgba(139, 123, 255, .15) 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	opacity: .75;
}
@media (hover: hover) { .fta-karte-rand { animation: fta-dreh 10s linear infinite; } }
@keyframes fta-dreh { to { --fta-w: 360deg; } }

/* Fortschritt */
.fta-leiste { display: none; margin-bottom: 26px; }
.fta-js .fta-leiste { display: block; }
.fta-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fta-stufen li { display: flex; align-items: center; gap: 10px; color: #8d93a0; font: 700 14px/1 var(--kopf); transition: color .3s; }
.fta-stufen b { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .18); color: #c4c8d1; font-size: 14px; transition: background-color .35s, border-color .35s, color .35s, transform .35s; }
.fta-stufen li.ist-aktiv { color: #fff; }
.fta-stufen li.ist-aktiv b { background: linear-gradient(135deg, #6d5cff, #a855f7); border-color: transparent; color: #fff; transform: scale(1.08); box-shadow: 0 0 0 5px rgba(139, 123, 255, .18); }
.fta-stufen li.ist-fertig { color: #cfd3db; }
.fta-stufen li.ist-fertig b { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .6); color: #34d399; }
.fta-stufen li.ist-klickbar { cursor: pointer; }
.fta-stufen li.ist-klickbar:hover { color: #fff; }
.fta-balken { position: relative; display: block; height: 4px; margin-top: 16px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.fta-balken > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lila), var(--cyan), var(--pink)); transform: scaleX(.333); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }

/* Schritte übereinander */
.fta-stufen-felder { display: grid; }
.fta-stufe, .fta-danke { grid-area: 1 / 1; min-width: 0; }
.fta-stufe { opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; }
.fta-stufe.ist-vorher { transform: translateX(-28px); }
.fta-stufe.ist-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .08s, transform .5s cubic-bezier(.2, .8, .2, 1) .08s, visibility 0s; }
.fta-karte.ist-fertig .fta-stufe { display: none; }
.fta-stufe.wackeln .fta-stufe-inhalt { animation: fta-wackeln .45s ease; }
@keyframes fta-wackeln { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }

.fta-stufe-kopf { margin-bottom: 22px; }
.fta .fta-stufe-nr { font: 700 12.5px/1 var(--kopf); text-transform: uppercase; letter-spacing: .14em; color: #9d90ff; }
.fta-stufe-titel { font-size: clamp(24px, 2.6vw, 32px); margin-top: 10px !important; outline: none; }
.fta .fta-stufe-unter { margin-top: 8px; color: #a9afbb; }
.fta-hinweis { display: none; margin-top: 14px !important; padding: 11px 14px !important; border-radius: 12px; background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .35); color: #fecdd3; font: 600 14.5px/1.4 var(--kopf); }
.fta-hinweis.ist-da { display: block; }
.fta-stufe-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.fta-stufe[data-stufe="0"] .fta-stufe-fuss { justify-content: flex-end; }

/* Knöpfe */
.fta .fta-knopf {
	position: relative; overflow: hidden; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 54px; padding: 0 26px; border-radius: 999px;
	font: 700 16px/1 var(--kopf); white-space: nowrap;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .3s, background-color .3s;
}
.fta .fta-knopf .fta-svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.fta .fta-knopf--weiter { background: linear-gradient(120deg, #6d5cff, #8b5cf6 55%, #c026d3); color: #fff; box-shadow: 0 14px 34px -14px rgba(124, 92, 255, .9); }
.fta .fta-knopf--weiter:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(124, 92, 255, 1); color: #fff; }
.fta .fta-knopf--weiter:hover .fta-svg { transform: translateX(4px); }
.fta .fta-knopf--zurueck { border: 1.5px solid rgba(255, 255, 255, .2) !important; background: transparent !important; color: #d6d9e0 !important; }
.fta .fta-knopf--zurueck:hover { border-color: rgba(139, 123, 255, .7) !important; color: #fff !important; }
.fta .fta-knopf--zurueck:hover .fta-svg { transform: translateX(-4px); }

/* ---------- Formular-Elemente (überschreibt Theme „form-style-7“) ---------- */
.fta .wpcf7 { margin: 0; }
.fta .wpcf7-form { margin: 0; }
.fta .wpcf7-form p { margin: 0; }
.fta-feld { display: block; margin: 0 0 16px; cursor: text; }
.fta-feld-titel { display: block; margin-bottom: 8px; font: 700 14px/1.2 var(--kopf); color: #e3e5ea; }
.fta-feld-titel i { font-style: normal; color: #f472b6; }
.fta-feld-titel em { font-style: normal; font-weight: 500; color: #8d93a0; }
.fta .wpcf7-form-control-wrap { display: block; position: relative; }
.fta .wpcf7 input[type="text"], .fta .wpcf7 input[type="email"], .fta .wpcf7 input[type="tel"], .fta .wpcf7 textarea, .fta .wpcf7 select {
	display: block; width: 100% !important; max-width: none !important; height: auto !important; min-height: 54px;
	margin: 0 !important; padding: 15px 16px !important;
	border: 1.5px solid rgba(255, 255, 255, .1) !important; border-radius: 14px !important;
	background: var(--feld) !important; color: #fff !important;
	font: 500 16px/1.4 var(--fliess) !important; letter-spacing: 0 !important; text-transform: none !important;
	box-shadow: none !important; outline: none !important;
	transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.fta .wpcf7 textarea { min-height: 150px; resize: vertical; }
.fta .wpcf7 input::placeholder, .fta .wpcf7 textarea::placeholder { color: #6f7581 !important; opacity: 1; }
.fta .wpcf7 input:hover, .fta .wpcf7 textarea:hover { border-color: rgba(255, 255, 255, .2) !important; }
.fta .wpcf7 input:focus, .fta .wpcf7 textarea:focus { border-color: var(--lila) !important; box-shadow: 0 0 0 4px rgba(139, 123, 255, .2) !important; background: #181820 !important; }
.fta .wpcf7 .wpcf7-not-valid { border-color: rgba(244, 63, 94, .8) !important; }
.fta .wpcf7-not-valid-tip { margin-top: 6px; font: 600 13px/1.3 var(--kopf); color: #fda4af; }
.fta .style-line::before, .fta .style-line::after { display: none !important; }
.fta-feld-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.fta-feld-raster .fta-feld:first-child { grid-column: 1 / -1; }
.fta .wpcf7-form.fta-tel-wichtig label:has(input[name="phone"]) .fta-feld-titel em { color: #fbbf24; }

/* Leistungs-Kacheln */
.fta .fta-kacheln { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fta .fta-kachel { display: block; margin: 0 !important; padding: 0 !important; }
.fta .fta-kachel label {
	position: relative; display: flex !important; align-items: center; gap: 14px; min-height: 84px; margin: 0 !important; padding: 16px 44px 16px 16px !important;
	border-radius: 18px; background: var(--feld); border: 1.5px solid rgba(255, 255, 255, .08); cursor: pointer;
	transition: border-color .3s, background-color .3s, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.fta .fta-kachel label:hover { border-color: rgba(139, 123, 255, .55); transform: translateY(-2px); }
.fta .fta-kachel input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
.fta .fta-kachel label::before, .fta .fta-kachel label::after { display: none !important; }
.fta .fta-kachel:focus-within label { box-shadow: 0 0 0 3px rgba(34, 211, 238, .5); }
.fta-kachel-symbol { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 14px; background: linear-gradient(140deg, rgba(109, 92, 255, .28), rgba(34, 211, 238, .1)); border: 1px solid rgba(139, 123, 255, .3); color: #d9d4ff; transition: background .35s, color .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.fta-kachel-symbol .fta-svg { width: 25px; height: 25px; }
.fta-kachel-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fta-kachel-text b { font: 700 16px/1.2 var(--kopf); color: #fff; }
.fta-kachel-text small { font-size: 13.5px; line-height: 1.35; color: #969ca9; }
.fta-kachel-haken { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .2); color: transparent; transition: background-color .3s, border-color .3s, color .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.fta-kachel-haken .fta-svg { width: 14px; height: 14px; stroke-width: 2.6; }
.fta-kachel.ist-gewaehlt label { border-color: rgba(139, 123, 255, .9); background: linear-gradient(140deg, rgba(109, 92, 255, .2), rgba(34, 211, 238, .06)); box-shadow: 0 16px 36px -22px rgba(124, 92, 255, .9); }
.fta-kachel.ist-gewaehlt .fta-kachel-symbol { background: linear-gradient(135deg, #6d5cff, #a855f7); color: #fff; transform: rotate(-6deg) scale(1.05); }
.fta-kachel.ist-gewaehlt .fta-kachel-haken { background: #34d399; border-color: #34d399; color: #0d2b20; transform: scale(1.1); }
.fta-kachel.ist-gewaehlt .fta-kachel-haken .fta-svg * { stroke-dasharray: 1; animation: fta-zeichnen .4s ease forwards; }
@keyframes fta-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Zeitrahmen-Chips + Kontaktweg */
.fta-zeit { margin: 4px 0 18px; }
.fta-chips, .fta-wege-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.fta .fta-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .12); background: var(--feld); color: #d6d9e0; font: 600 14.5px/1 var(--kopf); transition: border-color .3s, background-color .3s, color .3s, transform .3s; }
.fta .fta-chip .fta-svg { width: 17px; height: 17px; color: #9d90ff; }
.fta .fta-chip:hover { border-color: rgba(139, 123, 255, .6); color: #fff; transform: translateY(-1px); }
.fta .fta-chip[aria-pressed="true"] { background: linear-gradient(120deg, #6d5cff, #8b5cf6); border-color: transparent; color: #fff; }
.fta .fta-chip[aria-pressed="true"] .fta-svg { color: #fff; }
.fta-wege-wahl { margin: 4px 0 18px; }
.fta-wege-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fta .fta-weg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px; border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, .1); background: var(--feld); color: #d6d9e0; font: 700 15px/1.1 var(--kopf); transition: border-color .3s, background-color .3s, color .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.fta .fta-weg .fta-svg { width: 26px; height: 26px; color: #9d90ff; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
.fta .fta-weg:hover { border-color: rgba(139, 123, 255, .6); color: #fff; transform: translateY(-2px); }
.fta .fta-weg[aria-pressed="true"] { border-color: rgba(139, 123, 255, .95); background: linear-gradient(140deg, rgba(109, 92, 255, .24), rgba(34, 211, 238, .08)); color: #fff; }
.fta .fta-weg[aria-pressed="true"] .fta-svg { color: #fff; transform: scale(1.15); }
.fta [data-id="whatsappgroup"] { margin: 0; }
.fta [data-id="whatsappgroup"] .column-1_1 { width: 100%; padding: 0; float: none; }

/* Zustimmung – das Theme versteckt das echte Kästchen (clip/visibility) und malt ein eigenes per ::before; hier zurück zum echten Kästchen */
.fta .fta-zustimmung { margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: var(--feld); border: 1.5px solid rgba(255, 255, 255, .1); transition: border-color .3s, background-color .3s; }
.fta .fta-zustimmung:hover { border-color: rgba(139, 123, 255, .55); }
.fta .fta-zustimmung:has(input:checked) { border-color: rgba(52, 211, 153, .55); background: linear-gradient(140deg, rgba(52, 211, 153, .08), transparent 70%), var(--feld); }
.fta .fta-zustimmung.ist-fehler { border-color: rgba(244, 63, 94, .8); animation: fta-wackeln .45s ease; }
.fta .wpcf7-acceptance, .fta .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0 !important; padding: 0 !important; }
.fta .wpcf7-acceptance label { position: relative; display: flex !important; align-items: flex-start; gap: 14px; margin: 0 !important; padding: 0 !important; cursor: pointer; font: 500 15px/1.5 var(--fliess); color: #d6d9e0; }
.fta .wpcf7-acceptance input[type="checkbox"] {
	position: relative !important; left: auto !important; top: auto !important; clip: auto !important; clip-path: none !important;
	visibility: visible !important; opacity: 1 !important; display: block !important; pointer-events: auto !important;
	appearance: none; -webkit-appearance: none; flex: none;
	width: 24px !important; height: 24px !important; min-width: 24px; margin: 0 !important; padding: 0 !important;
	border-radius: 7px !important; border: 2px solid rgba(157, 144, 255, .85) !important; background: #101016 !important;
	cursor: pointer; box-shadow: 0 0 0 4px rgba(139, 123, 255, .12) !important;
	transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.fta .wpcf7-acceptance input[type="checkbox"]:hover { border-color: #b8adff !important; transform: scale(1.06); }
.fta .wpcf7-acceptance input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px rgba(34, 211, 238, .5) !important; outline: none; }
.fta .wpcf7-acceptance input[type="checkbox"]:checked { background: #34d399 !important; border-color: #34d399 !important; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18) !important; }
.fta .wpcf7-acceptance input[type="checkbox"]::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #0d2b20; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.fta .wpcf7-acceptance input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.fta .wpcf7-acceptance label::before, .fta .wpcf7-acceptance label::after,
.fta .wpcf7-acceptance .wpcf7-list-item-label::before, .fta .wpcf7-acceptance .wpcf7-list-item-label::after { display: none !important; content: none !important; }
.fta .wpcf7-acceptance .wpcf7-list-item-label { display: block; padding: 1px 0 0 !important; margin: 0 !important; }
.fta .wpcf7-acceptance a { color: #c4bbff; text-decoration: underline; text-underline-offset: 3px; }

/* Absenden – das Theme packt den Knopf in span.wpcf7-submit-style und legt span.submit-style-in als eckige Fläche dahinter */
.fta .wpcf7-submit-style { position: relative; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.fta .submit-style-in { display: none !important; }
.fta .fta-absenden { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.fta .wpcf7 input.wpcf7-submit {
	min-height: 56px; padding: 0 30px !important; border: 0 !important; border-radius: 999px !important;
	background: linear-gradient(120deg, #6d5cff, #8b5cf6 55%, #c026d3) !important; color: #fff !important;
	font: 700 16.5px/1 var(--kopf) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer;
	box-shadow: 0 14px 34px -14px rgba(124, 92, 255, .9) !important; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, opacity .3s;
}
.fta .wpcf7 input.wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(124, 92, 255, 1) !important; }
.fta .wpcf7 input.wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* Lade-Kreisel von CF7 liegt im Knopf rechts, statt Platz neben dem Knopf zu belegen */
.fta .wpcf7-spinner { position: absolute !important; right: 14px; top: 50%; margin: -12px 0 0 !important; z-index: 2; }
.fta .wpcf7 form .wpcf7-response-output { margin: 18px 0 0 !important; padding: 12px 16px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .15) !important; color: #e3e5ea; font-size: 14.5px; }
.fta .wpcf7 form.invalid .wpcf7-response-output, .fta .wpcf7 form.unaccepted .wpcf7-response-output { border-color: rgba(244, 63, 94, .5) !important; background: rgba(244, 63, 94, .08); }
.fta .wpcf7 form.sent .wpcf7-response-output { display: none !important; }

/* ---------- Danke ---------- */
.fta-danke { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 20px 10px 10px; opacity: 0; visibility: hidden; transform: scale(.96); outline: none; }
.fta-karte.ist-fertig .fta-danke { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .2s, transform .6s cubic-bezier(.2, .8, .2, 1) .2s; }
.fta-danke-symbol svg { width: 92px; height: 92px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fta-danke-symbol circle { stroke: rgba(52, 211, 153, .35); }
.fta-danke-symbol path { stroke: #34d399; stroke-dasharray: 40; stroke-dashoffset: 40; }
.fta-karte.ist-fertig .fta-danke-symbol path { animation: fta-strich .7s ease .6s forwards; }
.fta-karte.ist-fertig .fta-danke-symbol circle { animation: fta-ring 1.2s ease .3s; transform-origin: 50% 50%; }
@keyframes fta-strich { to { stroke-dashoffset: 0; } }
@keyframes fta-ring { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.fta-danke h2 { font-size: clamp(30px, 3.6vw, 44px); margin-top: 18px; outline: none; }
.fta-danke > p { max-width: 520px; margin-top: 12px !important; font-size: 17px; color: #c4c8d1; }
.fta .fta-danke-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.fta-danke-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .35); color: #bbf7d0; font: 600 13.5px/1 var(--kopf); }
.fta-danke-chips .fta-svg { width: 14px; height: 14px; }
.fta-danke-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.fta-konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fta-konfetti i { position: absolute; left: 50%; top: 22%; width: 8px; height: 12px; border-radius: 2px; background: hsl(calc(var(--k) * 37 + 250), 90%, 65%); opacity: 0; }
.fta-karte.ist-fertig .fta-konfetti i { animation: fta-konfetti 1.6s cubic-bezier(.2, .7, .3, 1) .5s forwards; }
@keyframes fta-konfetti {
	0% { opacity: 1; transform: translate(0, 0) rotate(0); }
	100% { opacity: 0; transform: translate(calc((var(--k) - 8.5) * 26px), calc(140px + var(--k) * 6px)) rotate(calc(var(--k) * 60deg)); }
}

/* ---------- Seitenleiste ---------- */
.fta-spalte { display: grid; gap: 16px; position: sticky; top: 24px; }
.fta-spalte > div { padding: 22px; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie); }
.fta .fta-spalte-titel { margin-bottom: 14px; font: 800 17px/1.2 var(--kopf); color: #fff; }
.fta-person { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.fta-person-bild { position: relative; width: 76px; height: 76px; border-radius: 20px; overflow: hidden; background: #0d0d12; box-shadow: 0 0 0 2px rgba(139, 123, 255, .5), 0 12px 26px -12px rgba(0, 0, 0, .9); }
.fta-person-bild img { position: absolute; width: 190px; max-width: none; height: auto; left: -70px; top: -68px; }
.fta .fta-klein { font: 700 12px/1 var(--kopf); text-transform: uppercase; letter-spacing: .12em; color: #9d90ff; }
.fta .fta-person-name { margin-top: 6px; font: 800 19px/1.2 var(--kopf); color: #fff; }
.fta .fta-person-rolle { margin-top: 2px; font-size: 14px; color: #a3a9b6; }
.fta .fta-person-text { grid-column: 1 / -1; margin-top: 4px; font-size: 14.5px; color: #b8bdc9; }
.fta-direkt { display: grid; gap: 8px; }
.fta-direkt .fta-spalte-titel { margin-bottom: 6px; }
.fta-direkt a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; color: #fff; font: 700 14.5px/1.3 var(--kopf); transition: border-color .3s, background-color .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.fta-direkt a:hover { border-color: rgba(139, 123, 255, .5); background: #22222c; transform: translateX(4px); }
.fta-direkt small { display: block; margin-bottom: 3px; font: 600 11.5px/1.2 var(--fliess); color: #9aa1ae; text-transform: uppercase; letter-spacing: .1em; }
.fta-weg-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(140deg, rgba(109, 92, 255, .32), rgba(34, 211, 238, .12)); color: #fff; }
.fta-weg-symbol .fta-svg { width: 19px; height: 19px; }
.fta-weiter ol { position: relative; display: grid; gap: 16px; }
.fta-weiter ol::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--lila), var(--cyan), transparent); opacity: .5; }
.fta-weiter li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.fta-weiter-punkt { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #23232e; border: 1.5px solid rgba(139, 123, 255, .5); color: #c4bbff; }
.fta-weiter-punkt .fta-svg { width: 17px; height: 17px; }
.fta-weiter b { display: block; font: 700 15px/1.3 var(--kopf); color: #fff; }
.fta-weiter li span:not(.fta-weiter-punkt) { display: block; font-size: 14px; line-height: 1.45; color: #a3a9b6; }

/* ---------- Unten: Vertrauen + Fragen ---------- */
.fta-unten { padding: 0 0 clamp(64px, 8vw, 110px); }
.fta .fta-vertrauen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding: 22px; border-radius: 22px; border: 1px solid var(--linie); background: #191920; }
.fta-vertrauen > span { font: 700 14px/1.2 var(--kopf); color: #e3e5ea; margin-right: 4px; }
.fta-vertrauen a { padding: 7px 12px; border-radius: 999px; background: #23232d; color: #c9cdd6; font: 600 13.5px/1 var(--kopf); transition: background-color .3s, color .3s; }
.fta-vertrauen a:hover { background: #2d2d3a; color: #fff; }
.fta .fta-vertrauen-alle { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #c4bbff; }
.fta-vertrauen-alle .fta-svg { width: 16px; height: 16px; }
.fta-fragen { max-width: 860px; margin: clamp(48px, 6vw, 80px) auto 0; }
.fta-fragen h2 { text-align: center; font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 26px; }
.fta-fragen-liste { display: grid; gap: 10px; }
.fta-fragen details { border-radius: 18px; background: var(--karte); border: 1px solid var(--linie); transition: border-color .3s; }
.fta-fragen details[open] { border-color: rgba(139, 123, 255, .45); }
.fta-fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 700 16.5px/1.35 var(--kopf); color: #fff; }
.fta-fragen summary::-webkit-details-marker { display: none; }
.fta-fragen summary i { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #262631; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.fta-fragen summary i::before, .fta-fragen summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #c4bbff; }
.fta-fragen summary i::after { transform: rotate(90deg); transition: transform .35s; }
.fta-fragen details[open] summary i { background: rgba(139, 123, 255, .3); }
.fta-fragen details[open] summary i::after { transform: rotate(0); }
.fta-fragen details p { padding: 0 20px 18px; color: #b8bdc9; }
.fta-fragen details p a { color: #c4bbff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ohne JavaScript: normales Formular, ordentlich gestaltet ---------- */
.fta:not(.fta-js) .fta-formular .columns_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; }
.fta:not(.fta-js) .fta-formular .columns_wrap > div { width: auto; padding: 0; float: none; margin-bottom: 14px; }
.fta:not(.fta-js) .fta-formular .column-2_3, .fta:not(.fta-js) .fta-formular .column-1_1 { grid-column: 1 / -1; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.fta-raster { grid-template-columns: minmax(0, 1fr); }
	.fta-spalte { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fta-spalte .fta-weiter { grid-column: 1 / -1; }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {
	.fta { font-size: 15.5px; }
	.fta-held { padding-top: 34px; }
	.fta-held h1 { font-size: clamp(34px, 10vw, 44px); }
	.fta-plaketten li { font-size: 13px; padding: 8px 12px; }
	.fta-karte { border-radius: 22px; padding: 20px 16px 22px; }
	.fta-stufen span { display: none; }
	.fta-stufen li { justify-content: center; }
	.fta .fta-kacheln { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.fta .fta-kachel label { min-height: 72px; padding: 12px 40px 12px 12px !important; }
	.fta-kachel-symbol { width: 44px; height: 44px; }
	.fta-feld-raster { grid-template-columns: minmax(0, 1fr); }
	.fta .fta-weg { min-height: 80px; font-size: 14px; }
	.fta-stufe-fuss { flex-direction: column-reverse; align-items: stretch; }
	.fta-stufe-fuss .fta-knopf, .fta .fta-absenden, .fta .wpcf7-submit-style, .fta .wpcf7 input.wpcf7-submit { width: 100% !important; justify-content: center; }
	.fta-spalte { grid-template-columns: minmax(0, 1fr); }
	/* Am Handy ist Schritt 1 sehr hoch – dort nur den aktiven Schritt zeigen, damit unter Schritt 2/3 keine Leere bleibt */
	.fta-stufe:not(.ist-aktiv) { display: none; }
	.fta-stufe.ist-aktiv { animation: fta-herein .45s cubic-bezier(.2, .8, .2, 1); }
	@keyframes fta-herein { from { opacity: 0; transform: translateX(22px); } }
}

/* Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
	.fta *, .fta *::before, .fta *::after { animation: none !important; transition: none !important; }
	.fta-danke-symbol path { stroke-dashoffset: 0; }
}