/* Magic-UI-Details nach Vanilla portiert (magicuidesign/magicui, MIT; Vorlagen .claude/skill-bibliothek/magicui/komponenten/*.tsx).
   Farben kommen aus der Richtung: --mg-licht (Glanz), --mg-strahl (Randstrahl). Keine Dauerbewegung: Glanz nur bei Hover/Fokus,
   Randstrahl läuft zweimal, wenn das Element sichtbar wird (magic.js setzt .im-blick), bei reduzierter Bewegung nichts. */

/* shiny-button: Lichtkante gleitet beim Darüberfahren über den Hauptknopf */
.glanz { position: relative; overflow: hidden; isolation: isolate; }
.glanz::after { content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, var(--mg-licht, rgba(255, 255, 255, .55)) 50%, transparent 70%);
  transform: translateX(-120%); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .glanz:hover::after, .glanz:focus-visible::after { transform: translateX(120%); transition: transform 900ms cubic-bezier(.23, 1, .32, 1); }
}

/* border-beam: ein Lichtpunkt läuft um den Rand (Prüfbericht) */
@property --mg-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.strahl { position: relative; }
.strahl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--mg-winkel), transparent 0 80%, var(--mg-strahl, #8fb4ff) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .strahl.im-blick::before { opacity: 1; animation: mg-umlauf 2400ms linear 2 forwards; }
}
@keyframes mg-umlauf { to { --mg-winkel: 360deg; opacity: 0; } }

/* safari: Browserleiste mit Adresse über Bildschirmfotos */
.safari { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--mg-leiste, #e9ecef); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.safari i { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .18); }
.safari span { margin-left: 10px; flex: 1; max-width: 60%; padding: 2px 10px; border-radius: 6px; background: rgba(255, 255, 255, .75); color: #333; font: 500 12px/1.6 system-ui, sans-serif; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* iphone: Dynamic Island auf dem Handy-Rahmen */
.insel { position: relative; }
.insel::before { content: ""; position: absolute; z-index: 2; top: 3.2%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #05070a; }

/* blur-fade: Titel erscheinen einmal aus der Unschärfe (beim Laden) */
@media (prefers-reduced-motion: no-preference) {
  .unschaerfe > * { animation: mg-blur 900ms cubic-bezier(.23, 1, .32, 1) both; }
  .unschaerfe > :nth-child(2) { animation-delay: 90ms; } .unschaerfe > :nth-child(3) { animation-delay: 180ms; } .unschaerfe > :nth-child(4) { animation-delay: 270ms; }
}
@keyframes mg-blur { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } }