/* KimHomeLink — Floating-Pille oben links (Vanilla-CSS, identisch mit shared/ui/KimHomeLink/KimHomeLink.css)
   Einbinden: <link rel="stylesheet" href="kim-home-link.css">
   Element:   <a class="kim-home-link" href="https://ki-macht-lernen.de" ...>
*/

.kim-home-link {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;

  background: #ffffff;
  color: #1ca5bd;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;

  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.kim-home-link:hover,
.kim-home-link:focus-visible {
  background: #1ca5bd;
  color: #ffffff;
  border-color: #1ca5bd;
  transform: scale(1.03);
}

.kim-home-link:focus-visible {
  outline: 2px solid #06b6d4;
  outline-offset: 2px;
}

.kim-home-link-arrow {
  font-size: 1.05rem;
  line-height: 1;
}

.kim-home-link-label-long {
  display: none;
}

.kim-home-link-label-short {
  display: inline;
}

@media (min-width: 600px) {
  .kim-home-link-label-long {
    display: inline;
  }
  .kim-home-link-label-short {
    display: none;
  }
}