/* assets/banner.css */
/* Sanftes Untis-Orange, keine "Buhne": transparenter Layer + zarte Outline/Glow */
:root{
  --untis-orange: #FF6F00;             /* Akzent */
  --banner-bg-dark: rgba(18, 18, 20, .58);
  --banner-bg-light: rgba(255, 255, 255, .72);
  --banner-fg-dark: #ffffff;
  --banner-fg-light: #151517;
  --banner-width: 260px;
  --banner-radius: 16px;
  --banner-blur: saturate(120%) blur(6px);
  --banner-shadow: 0 10px 28px rgba(0,0,0,.28);
  --ring: color-mix(in oklab, var(--untis-orange) 42%, transparent);
}

/* Fall-back, falls color-mix nicht unterstützt wird */
@supports not (color: color-mix(in oklab, white, black)) {
  :root { --ring: rgba(255, 111, 0, .35); }
}

/* Grundlayout */
.side-banner{
  position: fixed;
  top: 44%;
  transform: translateY(-50%);
  width: var(--banner-width);
  padding: 14px 14px 16px;
  border-radius: var(--banner-radius);
  border: 1px solid var(--ring);
  box-shadow: var(--banner-shadow), 0 0 0 3px color-mix(in oklab, var(--untis-orange) 12%, transparent);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px 12px;
  z-index: 1200; /* über fancy Background, unter Modals */
  backdrop-filter: var(--banner-blur);
  -webkit-backdrop-filter: var(--banner-blur);
  animation: sb-in .35s ease both;
}

/* Systemweite Präferenz zuerst */
@media (prefers-color-scheme: dark) {
  .side-banner { 
    background: var(--banner-bg-dark); 
    color: var(--banner-fg-dark); 
  }
}
@media (prefers-color-scheme: light) {
  .side-banner { 
    background: var(--banner-bg-light); 
    color: var(--banner-fg-light); 
  }
}

/* Manuelle Overrides via data-theme – kommen NACH den Medienregeln */
html[data-theme="dark"] .side-banner {
  background: var(--banner-bg-dark);
  color: var(--banner-fg-dark);
}
html[data-theme="light"] .side-banner {
  background: var(--banner-bg-light);
  color: var(--banner-fg-light);
}


/* Seitenposition */
.left-banner{ left: 14px; --slideX: -10px; }
.right-banner{ right: 14px; --slideX: 10px; }

@keyframes sb-in{
  from{ opacity: 0; transform: translateY(-50%) translateX(var(--slideX, 12px)) scale(.98); }
  to{ opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

/* Inhalte */
.sb-logo{ border-radius: 12px; grid-row: span 2; align-self: start; }
.sb-title{ margin: 0; font-weight: 700; font-size: .98rem; }
.sb-info{
  list-style: none; margin: 4px 0 0; padding: 0; font-size: .9rem;
  color: color-mix(in oklab, currentColor 78%, transparent);
}
.sb-info li{ margin: 5px 0; }
.sb-info a{
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in oklab, var(--untis-orange) 55%, transparent);
}

/* Close-Button */
.sb-close{
  position: absolute; top: 6px; right: 8px;
  appearance: none; border: 0; background: transparent;
  color: inherit; font-size: 1.2rem; line-height: 1;
  padding: 2px 6px; border-radius: 10px; cursor: pointer;
}
.sb-close:hover{
  background: color-mix(in oklab, var(--untis-orange) 16%, transparent);
}

/* Hover-Feedback (dezent) */
.side-banner:hover{
  transform: translateY(-50%) scale(1.03);
  box-shadow: var(--banner-shadow),
              0 0 0 3px color-mix(in oklab, var(--untis-orange) 20%, transparent),
              0 12px 42px color-mix(in oklab, var(--untis-orange) 14%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Fade-out beim Schließen */
.fade-out{
  opacity: 0; transform: translateY(-50%) scale(.96);
  transition: all .28s ease;
}

/* Mobile – standardmäßig aus, damit nichts stört */
@media (max-width: 900px){
  .side-banner{ display: none; }
}