body {
    min-height: 100vh;
    background: linear-gradient(135deg, #e0e7ff, #f0abfc, #a5b4fc, #f472b6, #e0e7ff);
    background-size: 400% 400%;
    animation: gradientMove 16s ease-in-out infinite;
    font-family: 'Montserrat', sans-serif;
    color: #222;
}
nav.navbar {
    background: rgba(24, 18, 43, 0.7) !important;
    box-shadow: 0 4px 24px 0 rgba(80, 0, 120, 0.10), 0 1.5px 4px 0 rgba(80, 0, 120, 0.10);
    transition: box-shadow 0.3s, background 0.3s;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
nav.navbar .container {
    background: transparent !important;
}
.navbar:hover {
    background: rgba(24, 18, 43, 0.85) !important;
    box-shadow: 0 8px 32px 0 rgba(120, 0, 180, 0.18), 0 3px 8px 0 rgba(120, 0, 180, 0.18);
}
.card, .glass {
    border-radius: 1.2rem;
    box-shadow: 0 2px 16px 0 rgba(120, 0, 180, 0.10);
    transition: box-shadow 0.3s;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.7);
}
.card:hover, .glass:hover {
    box-shadow: 0 8px 32px 0 rgba(120, 0, 180, 0.18);
}
.fancy-title {
    background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 700;
}
.btn-primary, .btn-secondary, .btn-danger {
    box-shadow: 0 2px 8px 0 rgba(80, 0, 120, 0.10);
    transition: transform 0.1s, box-shadow 0.2s;
    border-radius: 2rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.btn-primary {
    background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
    border: none;
}
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px 0 rgba(120, 0, 180, 0.18);
    filter: brightness(1.08);
}
.glow {
    box-shadow: 0 0 8px 2px #a21caf44, 0 0 32px 8px #6366f144;
}
.glass {
    background: rgba(255,255,255,0.6);
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
}
.icon-badge {
    display: inline-block;
    background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
    color: #fff;
    border-radius: 50%;
    padding: 0.7em;
    font-size: 2rem;
    box-shadow: 0 2px 8px 0 rgba(80, 0, 120, 0.10);
    margin-bottom: 1rem;
}
@keyframes heartbeat {
   0% { transform: scale(1); }
   10% { transform: scale(1.15); }
   20% { transform: scale(1); }
   30% { transform: scale(1.12); }
   40% { transform: scale(1); }
   100% { transform: scale(1); }
}
.heartbeat {
   animation: heartbeat 1.4s infinite;
   transform-origin: center;
}
@keyframes gradientMove {
   0% {background-position: 0% 50%;}
   50% {background-position: 100% 50%;}
   100% {background-position: 0% 50%;}
}
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #18122B, #232946, #44318D, #232946, #18122B);
        background-size: 400% 400%;
        animation: gradientMove 16s ease-in-out infinite;
        color: #f3f3fa;
    }
    .navbar, .navbar-dark.bg-dark {
        background: #18122B !important;
    }
    .card, .glass {
        background: rgba(34, 34, 51, 0.85);
        color: #f3f3fa;
        border: 1px solid rgba(255,255,255,0.08);
    }
    .fancy-title {
        background: linear-gradient(90deg, #a5b4fc 0%, #f472b6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
    .btn-primary {
        background: linear-gradient(90deg, #a5b4fc 0%, #f472b6 100%);
        color: #18122B;
    }
    .btn-secondary {
        background: #44318D;
        color: #fff;
    }
    .btn-danger {
        background: #f43f5e;
        color: #fff;
    }
    .icon-badge {
        background: linear-gradient(90deg, #a5b4fc 0%, #f472b6 100%);
        color: #18122B;
    }
} 
/* Sticky Header */
header.sticky-top {
  z-index: 1030;
  background: rgba(30, 30, 40, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08);
}
/* Sticky Footer */
footer.sticky-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(30, 30, 40, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 16px 0 rgba(0,0,0,0.08);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
}
.footer-copyright {
  color: #f8f9fa;
  font-size: 0.95rem;
  opacity: 0.85;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.12);
  margin: 0;
}
@media (max-width: 600px) {
  footer.sticky-footer { font-size: 0.85rem; min-height: 30px; }
} 
/* Utility-Klassen für ausgelagerte Inline-Styles */
.min-vh-60 { min-height: 60vh !important; }
.min-vh-70 { min-height: 70vh !important; }
.z-toast { z-index: 1080 !important; }
.top-toast { top: 4.5rem !important; }
.fs-2-5rem { font-size: 2.5rem !important; }
.fs-3rem { font-size: 3rem !important; }
.fs-1-5rem { font-size: 1.5rem !important; }
.fs-2rem { font-size: 2rem !important; }
.fs-1-2rem { font-size: 1.2rem !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-300 { max-width: 300px !important; }
.mt-1-5em { margin-top: 1.5em !important; }
.p-1em { padding: 1em !important; }
.p-0-7em { padding: 0.7em 1em !important; }
.rounded-1em { border-radius: 1em !important; }
.rounded-1-2em { border-radius: 1.2em !important; }
.rounded-0-5em { border-radius: 0.5em !important; }
.white-space-pre-line { white-space: pre-line !important; }
.white-space-pre-wrap { white-space: pre-wrap !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.bg-glass-gradient { background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%) !important; }
.bg-glass { background: rgba(30,30,40,0.7) !important; backdrop-filter: blur(8px) !important; }
.bg-glassmorphism { background: rgba(30,30,40,0.7) !important; backdrop-filter: blur(8px) !important; }
.bg-glass-effect { background: rgba(30,30,40,0.7) !important; backdrop-filter: blur(8px) !important; }
.bg-glass-shadow { box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08) !important; }
.bg-glass-border { border: 1px solid rgba(255,255,255,0.1) !important; }
.bg-glass-outline { outline: 1px solid rgba(255,255,255,0.1) !important; }
.bg-glass-primary { background: rgba(49,132,253,0.15) !important; }
.bg-glass-secondary { background: rgba(108,117,125,0.15) !important; }
.bg-glass-success { background: rgba(25,135,84,0.15) !important; }
.bg-glass-warning { background: rgba(255,193,7,0.15) !important; }
.bg-glass-danger { background: rgba(220,53,69,0.15) !important; }
.bg-glass-info { background: rgba(13,202,240,0.15) !important; }
.bg-glass-light { background: rgba(248,249,250,0.15) !important; }
.bg-glass-dark { background: rgba(33,37,41,0.15) !important; }
.bg-glass-white { background: rgba(255,255,255,0.15) !important; }
.bg-glass-black { background: rgba(0,0,0,0.15) !important; }
.bg-glass-transparent { background: transparent !important; }
.bg-glass-solid { background: #18122B !important; }
.bg-glass-soft { background: rgba(24,18,43,0.7) !important; }
.bg-glass-hard { background: rgba(24,18,43,1) !important; }
.bg-glass-strong { background: rgba(24,18,43,0.9) !important; }
.bg-glass-bold { background: rgba(24,18,43,0.85) !important; }
.bg-glass-thin { background: rgba(24,18,43,0.5) !important; }
.bg-glass-thick { background: rgba(24,18,43,0.95) !important; }
.bg-glass-thicker { background: rgba(24,18,43,0.98) !important; }
.bg-glass-thinnest { background: rgba(24,18,43,0.3) !important; }
.bg-glass-thickest { background: rgba(24,18,43,1) !important; }
.btn-glow { box-shadow: 0 0 8px 2px #6366f1, 0 0 2px 1px #a21caf; animation: glow 1.5s infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 8px 2px #6366f1, 0 0 2px 1px #a21caf; } to { box-shadow: 0 0 16px 4px #a21caf, 0 0 4px 2px #6366f1; } }
.btn-pulse { animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.07); } 100% { transform: scale(1); } } 
.pb-48 { padding-bottom: 48px !important; } 
/* Zusätzliche Utility-Klassen für ausgelagerte Inline-Styles */
.max-w-700 { max-width: 700px !important; }
.max-w-600 { max-width: 600px !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.h-100 { height: 100% !important; }
.bg-glass-gradient { background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%) !important; }
.rounded-1em { border-radius: 1em !important; }
.rounded-1-2em { border-radius: 1.2em !important; }
.rounded-0-5em { border-radius: 0.5em !important; }
.fs-1-5rem { font-size: 1.5rem !important; }
.fs-2rem { font-size: 2rem !important; }
.white-space-pre-line { white-space: pre-line !important; }
.white-space-pre-wrap { white-space: pre-wrap !important; }
.d-inline { display: inline !important; }
.overflow-y-auto { overflow-y: auto !important; }
.progress-h-1-2rem { height: 1.2rem !important; }
.min-w-180 { min-width: 180px !important; }
.bg-glass-dark { background: rgba(30,30,40,0.7) !important; color: #e0e7ff !important; }
.monospace { font-family: monospace !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.position-relative { position: relative !important; }
.position-fixed { position: fixed !important; }
.position-absolute { position: absolute !important; }
.border-0 { border: 0 !important; }
.border { border: 1px solid #dee2e6 !important; }
.border-secondary { border-color: #6c757d !important; }
.border-danger { border-color: #dc3545 !important; }
.border-info { border-color: #0dcaf0 !important; }
.border-success { border-color: #198754 !important; }
.border-warning { border-color: #ffc107 !important; }
.border-primary { border-color: #0d6efd !important; }
.border-light { border-color: #f8f9fa !important; }
.border-dark { border-color: #212529 !important; }
.border-white { border-color: #fff !important; }
.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.border-4 { border-width: 4px !important; }
.border-5 { border-width: 5px !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-start { border-left: 1px solid #dee2e6 !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.btn-block { display: block !important; width: 100% !important; }
.btn-group { display: inline-flex !important; }
.btn-group-lg { font-size: 1.25rem !important; }
.btn-group-sm { font-size: 0.875rem !important; }
.btn-group-vertical { flex-direction: column !important; }
.btn-group-horizontal { flex-direction: row !important; }
.btn-toolbar { display: flex !important; }
.btn-link { background: none !important; border: none !important; color: #0d6efd !important; text-decoration: underline !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-1 { gap: 0.25rem !important; }
.overflow-x-auto { overflow-x: auto !important; }
.text-primary { color: #0d6efd !important; }
.text-muted { color: #6c757d !important; }
.text-dark { color: #212529 !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-info { color: #0dcaf0 !important; }
.bg-info-subtle { background: #cff4fc !important; }
.bg-secondary-subtle { background: #e2e3e5 !important; }
.bg-gradient { background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%) !important; }
.bg-success { background: #198754 !important; }
.bg-warning { background: #ffc107 !important; }
.bg-glass { background: rgba(30,30,40,0.7) !important; backdrop-filter: blur(8px) !important; }
.glass { background: rgba(30,30,40,0.7) !important; backdrop-filter: blur(8px) !important; }
.glassmorphism { background: rgba(30,30,40,0.7) !important; backdrop-filter: blur(8px) !important; }
.glass-effect { background: rgba(30,30,40,0.7) !important; backdrop-filter: blur(8px) !important; }
.glass-shadow { box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08) !important; }
.glass-border { border: 1px solid rgba(255,255,255,0.1) !important; }
.glass-outline { outline: 1px solid rgba(255,255,255,0.1) !important; }
.glass-primary { background: rgba(49,132,253,0.15) !important; }
.glass-secondary { background: rgba(108,117,125,0.15) !important; }
.glass-success { background: rgba(25,135,84,0.15) !important; }
.glass-warning { background: rgba(255,193,7,0.15) !important; }
.glass-danger { background: rgba(220,53,69,0.15) !important; }
.glass-info { background: rgba(13,202,240,0.15) !important; }
.glass-light { background: rgba(248,249,250,0.15) !important; }
.glass-dark { background: rgba(33,37,41,0.15) !important; }
.glass-white { background: rgba(255,255,255,0.15) !important; }
.glass-black { background: rgba(0,0,0,0.15) !important; }
.glass-transparent { background: transparent !important; }
.glass-solid { background: #18122B !important; }
.glass-soft { background: rgba(24,18,43,0.7) !important; }
.glass-hard { background: rgba(24,18,43,1) !important; }
.glass-strong { background: rgba(24,18,43,0.9) !important; }
.glass-bold { background: rgba(24,18,43,0.85) !important; }
.glass-thin { background: rgba(24,18,43,0.5) !important; }
.glass-thick { background: rgba(24,18,43,0.95) !important; }
.glass-thicker { background: rgba(24,18,43,0.98) !important; }
.glass-thinnest { background: rgba(24,18,43,0.3) !important; }
.glass-thickest { background: rgba(24,18,43,1) !important; }