/* Inline styles of today's _includes/head.cfm and the extraHeadContent of we/marke.cfm, moved here
   so the pages carry no <style> elements. */
.w-dropdown-link.w--current {
  color: #ffffff !important;
  font-weight: 500 !important;
}
@keyframes spin {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(180deg); }
  100% { transform: rotateX(360deg); }
}
.spin {
  animation: spin 1s cubic-bezier(0.3, 0.61, 0.355, 1);
}
:root {
  --btn-transition-duration: 1s;
}
.logoimage {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.logoimage.active {
  opacity: 1;
}

/* Kontakt without JavaScript: the CMS sends the visitor back to #fehler on an error. */
#fehler:target {
  display: block !important;
}
/* Consent rows of the two forms (new, spec §7) */
.kontakt-consent {
  display: block;
  margin: 10px 0 20px;
}

/* /impact/: IMPACT letters (today request.extraHeadContent of impact.cfm) */
.impactanimationtext, .impactanimationtextmobile {
  font-variation-settings: "SSTR" 1000;
  animation: loadin 7s ease-in-out 1 forwards;
  transform: translateZ(0);
}
@keyframes loadin {
  0% { font-variation-settings: "SSTR" 1000; }
  100% { font-variation-settings: "SSTR" 0; }
}
.impactanimationcopydiv {
  width: 0;
  opacity: 0;
  overflow: hidden;
  height: 100%;
  transition: width 0.5s ease-out, opacity 0.5s ease-out;
}
.impactanimationcopydiv.show {
  width: 170px;
  opacity: 1;
}

/* /you/: marquee keyframes (today request.extraHeadContent of you.cfm; site.js replaces them with
   measured ones once the logos are loaded) and the fade-in of filtered logos (jQuery fadeIn(600)) */
@keyframes slideRight {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes slideLeft {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}
#logo-list-div > .logo-item.fade-in {
  animation: logo-fade-in 0.6s ease forwards;
}
@keyframes logo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* /catch-up/: sixth teaser tile (Way to Work in Action), same as the other tile images */
.catchupitemimagewaytowork {
  background-image: url('../images/Spital-Maennedorf.webp');
  background-position: 50%;
  background-size: cover;
}
/* the same grid placement as the OSEC tile (its Webflow ids #w-node-b390aab7-…325e/325f/3267) */
.tile-wtw { justify-self: end; }
.tile-wtw-copy { place-self: center end; }
@media screen and (max-width: 767px) {
  .tile-wtw-image { order: -9999; }
}

/* Accessibility widget (service.emotions.ch, 2026-11-13) */
/* Hero words are h2 now (page overview, screen readers): keep their look. */
h2.heroheading { margin: 0; color: inherit; }
/* Light contrast turns the orange navbar white: the white logo (letters cut out) turns dark. */
html.em-a11y-contrast-light .emotions-logo-white svg [fill="white"] { fill: #111 !important; }
/* Dark contrast: the Way-to-Win graphic hides lines under white shapes, so it keeps its light page colour. */
html.em-a11y-contrast-dark .waytowingraphic { background: #fdfcfa; border-radius: 12px; padding: 16px; }

/*
 * Animated buttons (Discover, Jetzt testen!, Let's talk!; 2026-11-13): the label is in the flow and the
 * slanted SVG frame stretches around it (preserveAspectRatio=none, 2px strokes at any size), so larger
 * text, wider spacing or longer labels never leave the frame. Original sizes stay the minimum.
 * The top line draws itself on hover/focus via clip-path (dash offsets break on stretched strokes).
 */
.button, .buttoncontent {
  --btn-w: 200px;
  display: inline-flex; align-items: center; box-sizing: border-box;
  width: auto; min-width: var(--btn-w); max-width: none; min-height: calc(var(--btn-w) * .289);
  padding: .3em 1.9em .3em .85em;
}
.buttoncontent { --btn-w: 130px; }
.button .button-txt, .buttoncontent .button-txt-content {
  position: relative; inset: auto; width: auto; margin: 0; line-height: 1.15;
}
.button > .w-embed, .buttoncontent > .w-embed { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* The label paints above the frame layer: contrast modes give every element (the frame layer too) a solid background. */
.button .button-txt, .buttoncontent .button-txt-content { z-index: 1; }
/* Short labels (Discover, Let's talk!, Jetzt testen!) stay on one line; the button grows instead. */
.button, .buttoncontent { flex-shrink: 0; }
.button .button-txt, .buttoncontent .button-txt-content { white-space: nowrap; }
@media screen and (max-width: 479px) { .button .button-txt, .buttoncontent .button-txt-content { white-space: normal; } }
/* Light contrast: white frame lines would vanish on the white background. */
html.em-a11y-contrast-light svg#button-shapes polyline { stroke: #111 !important; }
svg#button-shapes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
svg#button-shapes polyline { vector-effect: non-scaling-stroke; }
svg#button-shapes .top {
  stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  clip-path: inset(0 100% 0 0); transition: clip-path var(--btn-transition-duration) ease !important;
}
:is(.button, .buttoncontent):is(:hover, :focus-visible) svg#button-shapes .top { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { svg#button-shapes .top { transition: none !important; } }
html.em-a11y-motion svg#button-shapes .top { transition: none !important; }

/* Bands with fixed heights grow with their text (font size, spacing). */
.testlinkcontainer { height: auto; min-height: 200px; padding-block: 32px; box-sizing: border-box; }
/* Start page: the teaser is the second row of the hourglass grid (fixed 200/250px rows there). */
.sanduhrflexbox { grid-template-rows: minmax(auto, 1fr) auto; }
@media screen and (max-width: 479px) { .testlinkcontainer { min-height: 250px; } }
.testlinkcontainer .div-block-28 { min-width: 230px; max-width: none; }
.testimonialdiv { padding-block: 40px; }
.cornerimage { height: auto; min-height: 260px; width: 121px; align-self: stretch; object-fit: fill; }

/* Future Fitness Test: answer circles grow with their number. */
.testbutton, .testbutton10 {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
  width: max(50px, calc(1.75em + 8px)); height: max(47px, calc(1.75em + 5px)); border-radius: 999px;
}
.testbutton10 { text-indent: 0; letter-spacing: -.06em; }
/* Same spread as before at the original size; larger circles wrap left-aligned. */
.flex-block-7 { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; column-gap: max(6px, calc((100% - 500px) / 9)); }