:root{
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --paper-bg: #fffdf6;
  --site-color: #111827;
  --bs-info: #0dcaf0;
}

/* Info Button */
.info-button{
  display:inline-block;
  padding:0.35rem 0.9rem;
  background:var(--primary);
  color:#fff;
  border-radius:0.5rem;
  font-weight:600;
  text-decoration:none;
  transition:background 0.18s ease, transform 0.18s ease;
  cursor:pointer;
}
.info-button:hover{ background:var(--primary-hover); transform:translateY(-2px); }

/* Snippet Basis */
.info-snippet{
  width:100%;
  max-width:900px;
  background:var(--paper-bg);
  border-left:4px solid var(--primary);
  padding:0.6rem 1rem;
  margin:1.2rem 0;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  border-radius:8px;
  color:var(--site-color);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition:opacity 0.6s ease, transform 0.8s cubic-bezier(.2,.9,.2,1), max-height 0.6s ease, padding 0.4s ease, margin 0.4s ease;
  overflow:hidden;
  will-change:transform, opacity;
}

/* CSS-Fallback: falls JS deaktiviert ist */
.info-snippet.css-auto-hide{
  animation:cssFadeOut 1s ease forwards;
  animation-delay:6s;
}
@keyframes cssFadeOut{
  to{ opacity:0; max-height:0; padding:0; margin:0; }
}

/* Hidden state after shrink completes */
.info-snippet.hidden{
  display:none !important;
  visibility:hidden;
}

/* Inner layout */
.info-snippet-inner{ display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }
.info-snippet strong{ color:var(--primary); }

/* Responsive Feinheiten */
@media (max-width:640px){
  .info-snippet{ padding:0.5rem 0.8rem; margin:1rem 0; }
  .info-button{ padding:0.3rem 0.7rem; }
}
.info-link {
  color: var(--bs-info);
  text-decoration: none;
  font-weight: 500;
}
.info-link:hover {
  text-decoration: underline;
}
.info-link:active {
  color: var(--bs-info);
}
.info-link {
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.info-link:focus {
  outline: 2px solid var(--bs-info);
  outline-offset: 2px;
}