/* Workoffices Effekte. Nur Regeln für fx-…-Klassen; Startzustände nur mit .fx-an (= JavaScript läuft). */
:root{--fx-ease:cubic-bezier(.2,.72,0,1)}

/* fx-kopf */
.fx-an .fx-kopf{transition:transform 320ms var(--fx-ease)}
.fx-an .fx-kopf.kopf-oben{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.fx-an .fx-kopf.kopf-weg{transform:translateY(-100%)}

/* fx-hero-zoom */
.fx-an .fx-hero-zoom img{transform:scale(1.06);transition:transform 2400ms var(--fx-ease)}
.fx-an .fx-hero-zoom.ist-da img{transform:none}

/* fx-woerter */
.fx-woerter .wort{color:rgba(19,17,16,.16);transition:color 300ms linear}
.fx-woerter .wort.an{color:#131110}

/* fx-szene (ab 768 px): Bildrahmen bleibt stehen, aktiver Standort voll sichtbar */
.szene-streifen{transition:background-color 700ms var(--fx-ease)}
.szene-rahmen[data-aktiv="2"] .szene-streifen{background:#F94C30}
.szene-rahmen[data-aktiv="3"] .szene-streifen{background:#B9B0A2}
.szene-bild.ist-aktiv{opacity:1}
@media (min-width:768px){
  .fx-an .fx-szene .szene-rahmen{display:block;grid-column:1/8;position:sticky;top:96px;height:calc(100svh - 192px);min-height:440px;overflow:hidden}
  .fx-an .fx-szene .standorte-liste{grid-column:9/13;display:block}
  .fx-an .fx-szene .standort{min-height:72svh;justify-content:center;opacity:.3;transition:opacity 400ms var(--fx-ease)}
  .fx-an .fx-szene .standort.ist-aktiv{opacity:1}
  .fx-an .fx-szene .standort-bild{display:none}
}
@media (min-width:768px) and (max-width:1024px){
  .fx-an .fx-szene .szene-rahmen{grid-column:1/7}
  .fx-an .fx-szene .standorte-liste{grid-column:8/13}
}

/* Hover über die ganze Zeile (Elementor-Klassen kennen nur eigene Zustände) */
.elementor .kreis{transition:transform 300ms var(--fx-ease)}
.link-pfeil:hover .kreis,.angebot:hover .kreis{transform:translateX(4px)}

/* FAQ: Plus dreht sich beim Öffnen zum Kreuz */
details[open] .faq-plus{transform:rotate(45deg)}

/* Mobil: Platz für die feste Anfrage-Leiste */
@media (max-width:767px){body:has(.leiste-mobil){padding-bottom:76px}}

/* fx-karte */
.fx-an .fx-karte:not(.ist-sichtbar) .tram-maske{stroke-dashoffset:900}
.fx-an .fx-karte .tram-maske{transition:stroke-dashoffset 1400ms var(--fx-ease)}
.fx-an .fx-karte:not(.ist-sichtbar) .ort-gruppe{opacity:0}
.fx-an .fx-karte .ort-gruppe{transition:opacity 300ms var(--fx-ease) 1300ms}
.fx-an .fx-karte:not(.ist-sichtbar) .pin,.fx-an .fx-karte:not(.ist-sichtbar) .kehl-punkt{transform:scale(0)}
.fx-an .fx-karte .kehl-punkt{transition:transform 500ms var(--fx-ease) 1200ms}
.fx-an .fx-karte .pin{transition:transform 500ms var(--fx-ease) 1500ms}
.fx-an .fx-karte .pin-2{transition-delay:1650ms}
.fx-an .fx-karte .pin-3{transition-delay:1800ms}
.fx-karte .pin,.fx-karte .kehl-punkt{transform-box:fill-box;transform-origin:center}

/* fx-sticky (FAQ-Titel), nur Desktop */
@media (min-width:1025px){.fx-sticky{position:sticky;top:120px}}

/* Weniger Bewegung: sofort fertig */
@media (prefers-reduced-motion:reduce){
  .fx-an .fx-kopf,.fx-an .fx-hero-zoom img,.fx-woerter .wort,.szene-streifen,
  .fx-an .fx-szene .standort,.szene-bild,.kreis,.angebot-img,.faq-plus,.fx-an .fx-karte *{transition:none!important}
}

/* Kontaktformular (Fluent Forms): Unterstrich-Felder, zwei Spalten, dunkle Fläche. Lange Selektoren und !important nur, wo Fluent Forms selbst so stark setzt. */
.form-flaeche .frm-fluent-form fieldset{display:grid!important;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:8px}
.form-flaeche .frm-fluent-form .ff-el-group{margin:0}
.form-flaeche .frm-fluent-form .ff-el-group:has([name=telefon]),.form-flaeche .frm-fluent-form .ff-el-group:has(textarea),.form-flaeche .frm-fluent-form .ff-el-group:has(.ff-el-tc),.form-flaeche .frm-fluent-form .ff_submit_btn_wrapper{grid-column:1/-1}
.form-flaeche .frm-fluent-form .ff-el-input--label{margin:0;padding-top:16px}
.form-flaeche .frm-fluent-form .ff-el-input--label label{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#A9A196;margin:0}
.form-flaeche .frm-fluent-form .ff-el-is-required.asterisk-right label:after{color:#F94C30;margin-left:4px}
.form-flaeche .frm-fluent-form .ff-el-form-control{background:transparent;border:0;border-bottom:1px solid rgba(246,243,238,.18);border-radius:0;box-shadow:none;color:#F6F3EE;font-family:"Inter Tight",system-ui,sans-serif;font-size:16px;line-height:1.5;padding:8px 0 10px;min-height:44px;transition:border-color 240ms}
.form-flaeche .frm-fluent-form .ff-el-form-control:focus{border-bottom-color:#F6F3EE;outline:none;box-shadow:none;background:transparent}
.form-flaeche .frm-fluent-form .ff-el-form-control:focus-visible{outline:2px solid #F6F3EE;outline-offset:4px}
.form-flaeche .frm-fluent-form select.ff-el-form-control{appearance:none;-webkit-appearance:none;padding-right:28px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A9A196' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px center}
.form-flaeche .frm-fluent-form select.ff-el-form-control option{background:#1C1916;color:#F6F3EE}
.form-flaeche .frm-fluent-form textarea.ff-el-form-control{min-height:96px;resize:vertical}
.form-flaeche .frm-fluent-form .ff-el-form-check{margin:0;padding-top:16px}
.form-flaeche .frm-fluent-form .ff-el-form-check-label{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#A9A196;cursor:pointer;min-height:44px}
.form-flaeche .frm-fluent-form .ff-el-tc .ff-el-form-check-label.ff_tc_label{display:flex}
.form-flaeche .frm-fluent-form .ff-el-tc .ff_tc_checkbox,.form-flaeche .frm-fluent-form .ff-el-tc .ff_t_c{display:block;margin:0}
.form-flaeche .frm-fluent-form .ff-el-tc label.ff_tc_label>span{padding-top:0!important}
.form-flaeche .frm-fluent-form .ff-el-form-check-label .ff-el-form-check-input{position:static;appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:2px 0 0;border:1px solid #A9A196;border-radius:0;background:transparent;cursor:pointer}
.form-flaeche .frm-fluent-form .ff-el-form-check-label .ff-el-form-check-input:checked{background:#F94C30 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' stroke='%23131110' stroke-width='2'%3E%3Cpath d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E") no-repeat center;border-color:#F94C30}
.form-flaeche .frm-fluent-form .ff-el-form-check-input:focus-visible{outline:2px solid #F6F3EE;outline-offset:3px}
.form-flaeche .frm-fluent-form .ff_t_c a{color:#F6F3EE;text-decoration:underline;text-underline-offset:3px}
/* Knopf wie btn-primaer: rot, schwarze Schrift, drückt auf 97 % */
.form-flaeche .frm-fluent-form .ff_submit_btn_wrapper{padding-top:16px}
.form-flaeche .fluentform-widget-wrapper .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit.ff_btn_style:not(.ff_btn_no_style){display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:999px;background-color:#F94C30!important;color:#131110!important;font:500 16px/1 "Inter Tight",system-ui,sans-serif;letter-spacing:-.005em;opacity:1;transition:background-color 240ms,transform 100ms}
.form-flaeche .fluentform-widget-wrapper .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit.ff_btn_style:not(.ff_btn_no_style):hover{background-color:#FF6A50!important}
.form-flaeche .frm-fluent-form .ff-btn-submit:active{transform:scale(.97)}
.form-flaeche .frm-fluent-form .ff-btn-submit:focus-visible{outline:2px solid #F6F3EE;outline-offset:3px}
/* Fehler und Bestätigung */
.form-flaeche .frm-fluent-form .error,.form-flaeche .frm-fluent-form .text-danger{color:#FF8A75;font-size:14px;margin-top:6px}
.form-flaeche .frm-fluent-form .ff-el-is-error .ff-el-form-control{border-bottom-color:#FF8A75}
.form-flaeche .ff-message-success{background:transparent;border:1px solid rgba(246,243,238,.18);box-shadow:none;color:#F6F3EE;padding:24px;font-size:18px}
@media (max-width:767px){.form-flaeche .frm-fluent-form fieldset{grid-template-columns:1fr}}

/* Rechtsseiten: Links im Text unterstrichen */
.recht-p a{color:inherit;text-decoration:underline;text-underline-offset:4px}
