/* Symplified UI enhancements: hover, reveal, focus. Respektiert prefers-reduced-motion. */
:root{--fx-ease:cubic-bezier(.22,.61,.36,1);--fx-shadow:0 14px 34px -18px rgba(21,56,88,.35)}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto}

/* Karten */
:is(.card,.service,.insight-card,.team-card,.client-card,.tax-card,.mission-card,.map-card,.contact-card,.why-point,.audience-item,.partner,.entity,.choice,.step){
  transition:transform .35s var(--fx-ease),box-shadow .35s var(--fx-ease),border-color .35s var(--fx-ease),background-color .35s var(--fx-ease)}
@media (hover:hover){
  :is(.card,.service,.insight-card,.team-card,.client-card,.tax-card,.mission-card,.map-card,.partner,.entity,.choice):hover{
    transform:translateY(-4px);box-shadow:var(--fx-shadow);border-top-color:#153858}
  :is(.why-point,.audience-item,.step):hover{transform:translateX(3px)}
  .team-card img,.insight-card img{transition:transform .6s var(--fx-ease)}
  .team-card:hover img,.insight-card:hover img{transform:scale(1.03)}
}

/* Buttons */
.btn{transition:transform .25s var(--fx-ease),box-shadow .25s var(--fx-ease),background-color .25s,color .25s,border-color .25s}
@media (hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(21,56,88,.55)}}
.btn:active{transform:translateY(0)}

/* Navigation: Unterstrich waechst */
header nav a:not(.btn){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .3s var(--fx-ease),color .2s}
@media (hover:hover){header nav a:not(.btn):hover{background-size:100% 1.5px}}

/* Textlinks im Inhalt */
:is(.article-body,.article-section,.terms-section,.lead) a:not(.btn){text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s,color .2s}

/* Tastatur-Fokus */
:is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid #567489;outline-offset:3px;border-radius:3px}

/* Details/FAQ */
details summary{cursor:pointer;transition:color .2s}
details[open] > *:not(summary){animation:fx-fade .35s var(--fx-ease)}

/* Scroll-Reveal (nur wenn JS aktiv und Motion erlaubt) */
.fx :is(.card,.service,.insight-card,.team-card,.client-card,.tax-card,.mission-card,.map-card,.contact-card,.why-point,.audience-item,.trust-item,.step,.panel,.head,.article-section,.partner,.entity,.checklist,.tablebox):not(.is-in){
  opacity:0;translate:0 16px}
.fx :is(.card,.service,.insight-card,.team-card,.client-card,.tax-card,.mission-card,.map-card,.contact-card,.why-point,.audience-item,.trust-item,.step,.panel,.head,.article-section,.partner,.entity,.checklist,.tablebox).is-in{
  opacity:1;translate:none;transition:opacity .7s var(--fx-ease) var(--fx-d,0ms),translate .7s var(--fx-ease) var(--fx-d,0ms),transform .35s var(--fx-ease),box-shadow .35s var(--fx-ease),border-color .35s}
.fx-done :is(.card,.service,.insight-card,.team-card,.client-card,.tax-card,.mission-card,.map-card,.contact-card,.why-point,.audience-item,.trust-item,.step,.panel,.head,.article-section,.partner,.entity,.checklist,.tablebox){opacity:1!important;translate:none!important}
.fx-done img{opacity:1!important}

/* Hero dezent einblenden */
.fx .hero :is(h1,.lead,.actions,.eyebrow,.kick){animation:fx-up .8s var(--fx-ease) both}
.fx .hero .lead{animation-delay:.08s}.fx .hero .actions{animation-delay:.16s}

/* Lazy-Bilder weich einblenden */
img[loading="lazy"]{transition:opacity .5s var(--fx-ease)}
.fx img[loading="lazy"]:not(.is-loaded){opacity:0}

@keyframes fx-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fx *{opacity:1!important;translate:none!important}
.fx-done img{opacity:1!important}
}
header.top{transition:box-shadow .3s var(--fx-ease)}
header.top.is-scrolled{box-shadow:0 8px 24px -18px rgba(21,56,88,.45)}

/* Footer-Logo: .footer-column a{display:block} aus global-footer.js ueberschreiben */
footer .footer-column a.footer-brand,footer a.brand.footer-brand{display:flex!important;align-items:center;gap:1.15rem;width:max-content;margin:0 0 1.3rem;padding-left:8px}
footer .footer-brand .brand-mark{display:block!important;flex:0 0 40px;width:40px;height:40px;margin:8px 0}
footer .footer-brand .words{display:block!important;line-height:1}
footer .footer-brand .words b{display:block;font-size:1.15rem;line-height:1.1}
footer .footer-brand .words small{display:block;margin-top:4px}
footer .nw{display:inline!important;white-space:nowrap}