/* ============================================================================
   4founder redesign — page CSS for route "kontakt"
   GENERATED by tools/redesign-port/extract.mjs from kontakt/Kontakt-v14-yves.dc.html
   (re-running the extractor overwrites this file). Loaded only on this route;
   shared rules live in ../base.css, palette/scale vars in ../tokens.css.
   ============================================================================ */

.ff-field{font:inherit;font-size:1rem;color:var(--ff-heading);background:#fff;border:1.5px solid var(--ff-border);border-radius:0.8rem;padding:13px 15px;width:100%;transition:border-color .18s ease,box-shadow .18s ease;outline:none}
.ff-field:focus{border-color:var(--ff-brand);box-shadow:0 0 0 4px rgba(var(--ff-brand-rgb),0.12)}
.ff-field::placeholder{color:#a2aabb}
details.ff-faq .ff-faq-ic{color:var(--ff-brand)}
details.ff-faq .ff-faq-ic::before{content:'+'}
details.ff-faq[open] .ff-faq-ic{background:var(--ff-brand);border-color:var(--ff-brand);color:#fff}
details.ff-faq[open] .ff-faq-ic::before{content:'\2212'}
details.ff-faq summary:hover .ff-faq-ic{border-color:var(--ff-brand)}

/* ── extracted style-hover/style-focus rules (must beat inline style="") ── */
.ff-redesign .ffh-1:hover{transform:translateY(-5px) !important;box-shadow:0 18px 38px rgba(103,133,219,0.20) !important}
.ff-redesign .ffh-2:hover{transform:translateY(-5px) !important;box-shadow:0 20px 42px rgba(var(--ff-brand-rgb),0.4) !important}
.ff-redesign .ffh-3:hover{transform:translateY(-2px) !important;box-shadow:0 14px 32px rgba(var(--ff-brand-rgb),0.4) !important}

/* ── hand-finished additions (re-append after a re-extraction) ──────────── */
/* "Route planen" outline link on the address header of the map card. */
body.ff-redesign.ff-route-kontakt .ffk-route:hover{border-color:var(--ff-brand);color:var(--ff-brand);transform:translateY(-1px)}

/* Map card = address header + Google Maps Embed iframe in one rounded frame.
   The right column runs much shorter than the form beside it, so the card takes
   the slack: it targets a roughly square footprint at desktop widths (the head
   is ~175px, the frame the rest) and keeps a usable map height when the column
   goes full-width on mobile. */
body.ff-redesign.ff-route-kontakt .ffk-map-frame{display:block;width:100%;height:clamp(240px,23vw,300px);border:0;background:#eef3fa}
@media (max-width:900px){
  body.ff-redesign.ff-route-kontakt .ffk-map-frame{height:280px}
}