/* SIXMEDIA Service-Hinweis · 2026-10-18 · owned by SixTheme */
.six-service-hint {
  --service-orange: var(--six-brand-primary, #ef7d00);
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom), var(--service-clearance, 0px));
  width: min(336px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  z-index: 80;
  color: #fff;
  font-family: inherit;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.six-service-hint, .scroll-up-button.js-scroll-up-button { right: max(20px, env(safe-area-inset-right)); }
.six-service-hint[hidden], .six-service-hint [hidden] { display: none !important; }
/* Keyframes also run when hidden/display:none is removed in the same frame. */
.six-service-hint.is-visible { opacity: 1; visibility: visible; transform: none; animation: six-service-enter .55s cubic-bezier(.22, 1, .36, 1) both; }
.six-service-hint.is-visible > * { pointer-events: auto; }
@keyframes six-service-enter {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.six-service-hint *, .six-service-hint *::before, .six-service-hint *::after { box-sizing: border-box; }
.six-service-hint__panel, .six-service-hint__teaser {
  position: relative;
  background: #2b2b2b;
  border: 1px solid #454440;
  box-shadow: 0 12px 36px #00000026;
  border-radius: 18px;
}
.six-service-hint__panel { padding: 19px 17px 8px; max-height: calc(100dvh - 180px); overflow-y: auto; overscroll-behavior: contain; }
.six-service-hint .six-service-hint__heading { margin: 0 28px 11px 0; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.035em; white-space: nowrap; }
.six-service-hint__heading span { color: var(--service-orange); }
.six-service-hint button { font-family: inherit; cursor: pointer; }
.six-service-hint svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.six-service-hint .six-service-hint__close { display: grid; place-items: center; position: absolute; right: 2px; top: 5px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #d5d2cd; background: transparent; transition: color .15s, background-color .15s; }
.six-service-hint__close svg { width: 26px; height: 26px; stroke-width: 1.8; }
.six-service-hint .six-service-hint__close:hover { color: #fff; background: #ffffff12; }
.six-service-hint .six-service-hint__link { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; align-items: center; min-height: 72px; padding: 12px 1px; color: #fff; text-decoration: none; border-top: 1px solid #ffffff1a; border-radius: 0; transition: background-color .15s; }
.six-service-hint__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #373632; color: var(--service-orange); }
.six-service-hint__text { min-width: 0; }
.six-service-hint__text strong { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.six-service-hint__text small { display: block; margin-top: 3px; color: #c6c3be; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: -.015em; }
.six-service-hint svg.six-service-hint__arrow { width: 16px; height: 16px; color: #aaa69e; transition: transform .15s, color .15s; }
.six-service-hint .six-service-hint__link:hover { background: #ffffff06; }
.six-service-hint__link:hover .six-service-hint__arrow { color: var(--service-orange); transform: translateX(2px); }
.six-service-hint a:focus-visible, .six-service-hint button:focus-visible { outline: 2px solid var(--service-orange); outline-offset: 3px; }
.six-service-hint__teaser { width: max-content; margin-left: auto; border-radius: 28px; }
.six-service-hint .six-service-hint__toggle { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 16px; border: 0; border-radius: 28px; background: transparent; color: var(--service-orange); font-size: 14px; font-weight: 600; line-height: 1.5; }
@media (max-width: 1023px) {
  .six-service-hint, .scroll-up-button.js-scroll-up-button { right: max(16px, env(safe-area-inset-right)); }
  .six-service-hint { bottom: max(16px, env(safe-area-inset-bottom), var(--service-clearance, 0px)); }
  .six-service-hint__teaser { width: 45px; height: 45px; border-radius: 24px; }
  .six-service-hint .six-service-hint__toggle { justify-content: flex-start; width: 100%; height: 100%; min-height: 0; padding: 0 10.5px; gap: 0; border-radius: 24px; overflow: hidden; }
  .six-service-hint__toggle-label { display: none; }
  .six-service-hint .six-service-hint__toggle svg { width: 22px; height: 22px; }
  /* Show the label, wiggle once, slide closed, then wiggle the circular icon. */
  .six-service-hint.is-visible[data-service-attention="true"] .six-service-hint__teaser { animation: six-service-intro-collapse .45s ease-in-out 1.8s both, six-service-intro-wiggle .8s ease-in-out .6s, six-service-attention .8s ease-in-out 2.65s; transform-origin: 50% 70%; }
  .six-service-hint[data-service-attention="true"] .six-service-hint__toggle { gap: 8px; }
  .six-service-hint[data-service-attention="true"] .six-service-hint__toggle-label { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; animation: six-service-intro-label .25s ease 1.65s both; }
  .six-service-hint.is-visible[data-service-attention-paused] .six-service-hint__teaser, .six-service-hint.is-visible[data-service-attention-paused] .six-service-hint__toggle-label { animation-play-state: paused; }
  .six-service-hint[data-service-attention-paused] .six-service-hint__teaser { transform: none !important; }
}
@keyframes six-service-intro-collapse {
  from { width: 160px; }
  to { width: 45px; }
}
@keyframes six-service-intro-label {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes six-service-intro-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(1deg); }
}
@keyframes six-service-attention {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-9deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(3deg); }
}
@media (max-width: 359px) {
  .six-service-hint__panel { padding-inline: 13px; }
  .six-service-hint .six-service-hint__heading { font-size: 14px; }
  .six-service-hint .six-service-hint__link { grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 8px; }
  .six-service-hint__icon { width: 30px; height: 32px; }
  .six-service-hint__text strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .six-service-hint, .six-service-hint * { transition: none !important; transform: none !important; animation: none !important; } }
@media print { .six-service-hint { display: none !important; } }