/* ============================================================
   VMA STANDALONE CORE (Struktur/Layout)
   ============================================================
   Enthaelt ALLE Layout- und Struktur-Styles (ehemalige
   alpine-noir.css + vma-standalone.css) OHNE Farbwerte.
   Farben kommen ausschliesslich aus den Theme-Dateien
   (vma-standalone-theme-*.css), die die --vst-* Variablen
   setzen. Theme wird in php/config.php gewaehlt
   (VMA_STANDALONE_THEME).
   ============================================================ */

:root {
  --vst-font-serif: 'DM Serif Display', Georgia, serif;
  --vst-font-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --vst-font-handwriting: 'Dancing Script', cursive;
  --vst-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   ALPINE NOIR - Custom Design System for Bootstrap 5
   ============================================================ */

/* ---- CSS Variables ---- */


/* ---- Global Styles ---- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--vst-bg-deep);
  color: var(--vst-text-primary);
  font-family: var(--vst-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
div.an-modal {
  background-color: var(--vst-bg-card-alpha-95) !important;
  color: var(--vst-text-primary);
  font-family: var(--vst-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vst-font-serif);
}




a {
  text-decoration: none;
  transition: color 0.3s var(--vst-transition);
}

::selection {
  background: var(--vst-accent-alpha-3);
  color: var(--vst-text-primary);
}

:focus-visible {
  outline: 2px solid var(--vst-accent-alpha-5);
  outline-offset: 2px;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--vst-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--vst-accent-alpha-25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--vst-accent-alpha-45); }

/* ---- Grain Texture Overlay ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAVBAR
   ============================================================ */
.an-navbar {
  background: var(--vst-bg-navbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: all 0.5s var(--vst-transition);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.an-navbar.scrolled {
  background: var(--vst-bg-navbar-solid);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  border-bottom-color: var(--vst-accent-overlay-soft);
}

.an-brand {
  font-family: var(--vst-font-handwriting) !important;
  font-size: 1.5rem !important;
  font-weight: 600;
  background: linear-gradient(135deg, var(--vst-accent), var(--vst-accent-bright), var(--vst-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  transition: opacity 0.3s !important;
}

.an-brand:hover {
  opacity: 0.8;
}

.an-nav-link {
  color: var(--vst-text-primary) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  transition: color 0.3s var(--vst-transition) !important;
}

.an-nav-link:hover,
.an-nav-link:focus {
  color: var(--vst-accent) !important;
}

.an-login-link {
  color: var(--vst-accent) !important;
}

.an-login-link:hover {
  color: var(--vst-accent-bright) !important;
}

/* Dropdown */
.an-dropdown {
  background: var(--vst-bg-card-alpha-95) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--vst-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
  padding: 0.5rem 0 !important;
  min-width: 240px !important;
  margin-top: 0.75rem !important;
  animation: anDropdownIn 0.3s var(--vst-transition);
}

@keyframes anDropdownIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.pe-3 { padding-right: 1rem !important; }
.btn-remove-collection, .ajax-post[role="button"], .btn-add-collection, .btn-delete-collection {  cursor: pointer;}

.an-dropdown h4 { margin-top: 0; margin-bottom: 0.25rem; }

.an-dropdown-header {  font-family: var(--vst-font-serif);  font-size: 1.15rem;  font-weight: 600;  color: var(--vst-text-primary) !important;  padding: 0.5rem 1rem !important;  margin: 0 !important;  border-bottom: 1px solid var(--vst-border);}

.an-dropdown-item .form-control.an-form-input {  border-radius: 0.375rem 0 0 0.375rem;  border-right: none;  padding: 0.375rem 0.625rem !important;  font-size: 0.875rem;}
.an-dropdown-item .input-group-btn.btn {  padding: 0.375rem 0.625rem;  font-size: 0.875rem;}
.an-dropdown-item .input-group-btn.btn {  border-radius: 0 0.375rem 0.375rem 0;}

.an-dropdown > li:first-of-type { margin-top: 0; }
.an-dropdown-item {
  color: var(--vst-text-muted) !important;
  font-size: 0.875rem;
  padding: 0.625rem 1rem !important;
  transition: all 0.2s var(--vst-transition) !important;
}

.an-dropdown-item:hover,
.an-dropdown-item:focus {
  color: var(--vst-accent) !important;
  background: var(--vst-accent-alpha-05) !important;
}

.an-icon-gold {
  color: var(--vst-accent-alpha-4);
}

/* Login Dropdown */
.an-login-dropdown {
  min-width: 300px !important;
  padding: 0 !important;
}

.an-login-title {
  font-family: var(--vst-font-serif);
  color: var(--vst-accent);
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.an-login-subtitle {
  color: var(--vst-text-alpha-4);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

/* Formular-Kennzeichnung Pflicht/Optional (TODO #W17) */
.vma-req { color: var(--vst-danger); font-weight: 700; margin-left: 0.2em; }
.vma-opt { color: var(--vst-text-muted); font-weight: 400; font-size: 0.75em; margin-left: 0.4em; }
#neukunde .vma-field-error { border-color: var(--vst-danger) !important; background: var(--vst-danger-overlay) !important; }
.vma-reg-error-box {  border: 1px solid var(--vst-danger);  background: var(--vst-danger-overlay, rgba(176,42,55,0.12));  color: var(--vst-danger-bright);  border-radius: 0.5rem;  padding: 0.75rem 1rem;  margin-bottom: 0.75rem;  font-weight: 500;}
.vma-reg-error-box ul { margin: 0; padding-left: 1.1rem; }
.an-form-label {
  display: block;
  font-size: 0.7rem;
  color: var(--vst-text-alpha-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.375rem;
}

.an-form-input {
  background: var(--vst-bg-modal) !important;
  border: 1px solid var(--vst-border) !important;
  border-radius: 0.5rem !important;
  color: var(--vst-text-primary) !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color 0.2s !important;
}

.an-form-input::placeholder {
  color: var(--vst-text-alpha-2) !important;
}

.an-form-input:focus {
  border-color: var(--vst-accent-alpha-35) !important;
  box-shadow: 0 0 0 2px var(--vst-accent-alpha-1) !important;
}

.an-forgot-link {
  font-size: 0.75rem;
  color: var(--vst-accent-alpha-5);
  transition: color 0.2s;
}

.an-forgot-link:hover {
  color: var(--vst-accent);
}

/* Search */
.an-search-form {
  position: relative;
}

.an-search-input {
  width: 13rem;
  background: var(--vst-text-alpha-05) !important;
  border: 1px solid var(--vst-accent-overlay-soft) !important;
  border-radius: 9999px !important;
  padding: 0.375rem 2.5rem 0.375rem 1rem !important;
  font-size: 0.875rem !important;
  color: var(--vst-text-primary) !important;
  transition: all 0.4s var(--vst-transition) !important;
}

.an-search-input::placeholder {
  color: var(--vst-text-alpha-25) !important;
}

.an-search-input:focus {
  width: 16rem;
  border-color: var(--vst-accent-alpha-25) !important;
  background: var(--vst-surface-overlay-2) !important;
  box-shadow: none !important;
}

.an-search-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--vst-accent-alpha-4);
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
}

.an-search-btn:hover {
  color: var(--vst-accent);
}

/* Icon Buttons */
.an-icon-btn {
  color: var(--vst-text-muted);
  padding: 0.5rem;
  font-size: 0.875rem;
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.an-icon-btn:hover {
  color: var(--vst-accent);
}

/* Toggler */
.an-toggler {
  border: none !important;
  padding: 0.5rem !important;
  color: var(--vst-text-muted) !important;
  font-size: 1.25rem;
}

.an-toggler:focus {
  box-shadow: none !important;
}

/* Gold Button */
.an-btn-gold {
  background: linear-gradient(135deg, var(--vst-accent), var(--vst-accent-dark)) !important;
  color: var(--vst-bg-elevated) !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  border: none;
  transition: all 0.3s var(--vst-transition);
  box-shadow: 0 4px 15px var(--vst-accent-alpha-1);
}

.an-btn-gold:hover {
  background: linear-gradient(135deg, var(--vst-accent-bright), var(--vst-accent)) !important;
  box-shadow: 0 4px 20px var(--vst-accent-alpha-2);
  color: var(--vst-bg-elevated) !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.an-hero {
  position: relative;
  height: 260px;
  overflow: hidden;
}

@media (min-width: 768px) { .an-hero { height: 320px; } }
@media (min-width: 992px) { .an-hero { height: 360px; } }

.an-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroZoom 8s linear forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.1); }
  to { transform: scale(1.05); }
}

.an-hero-overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--vst-bg-deep), var(--vst-shadow-navbar-3), var(--vst-shadow-navbar-1));
}

.an-hero-overlay-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--vst-shadow-navbar-3), transparent, var(--vst-shadow-navbar-1));
}

.an-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, var(--vst-shadow-navbar-2) 100%);
}

/* Breadcrumb: Pill-Optik fuer Lesbarkeit ueber dem Hero-Bild */
.an-hero .breadcrumb {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 0.5rem;
  background: var(--vst-breadcrumb-bg, var(--vst-bg-deep));
  border: 1px solid var(--vst-breadcrumb-border, var(--vst-border));
}
.an-breadcrumb-link {
  color: var(--vst-breadcrumb, var(--vst-text-primary));
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.2s;
}
.an-breadcrumb-link:hover {
  color: var(--vst-accent);
  text-decoration: underline;
}
.an-hero .breadcrumb-item + .breadcrumb-item::before {
  color: var(--vst-breadcrumb-sep, var(--vst-text-muted));
  padding-right: 0.5rem;
}
.breadcrumb {
  margin-bottom: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--vst-breadcrumb-sep, var(--vst-text-muted));
}

/* Gold Line */
.an-gold-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(to right, var(--vst-accent), transparent);
}

.an-gold-line-full {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vst-accent-alpha-4), transparent);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.an-main-content {
  margin-top: -1rem;
  position: relative;
  z-index: 10;
  padding-bottom: 2rem;
}

/* ============================================================
   CARDS (Glass Morphism)
   ============================================================ */
.an-card {
  position: relative;
  background: var(--vst-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--vst-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.4s var(--vst-transition);
}

.an-card:hover {
  border-color: var(--vst-border-hover);
  box-shadow: 0 8px 32px var(--vst-accent-alpha-06), 0 0 0 1px var(--vst-accent-alpha-05);
  transform: translateY(-2px);
}

.an-card-accent {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--vst-accent-alpha-3), transparent);
}

.an-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 0.75rem;
}

.an-card-title, div.an-card > div.an-card-header > h2.an-card-title {
  font-family: var(--vst-font-serif);
  font-size: 1.25rem;
  color: var(--vst-text-primary);
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.3;
}

.an-card-subtitle {
  font-size: 0.875rem;
  color: var(--vst-text-alpha-4);
  margin: 0.25rem 0 0;
}

.an-card-separator {
  margin: 0 1.25rem;
  height: 1px;
  background: linear-gradient(to right, var(--vst-accent-overlay), var(--vst-accent-overlay-soft), transparent);
}

.an-card-footer {  padding: 0 1.5rem 1.25rem;  margin-top: 0.75rem;}
.an-card-body {
  padding: 1rem 1.25rem 1.25rem;
}

.an-collapse-btn {
  background: none;
  border: none;
  color: var(--vst-accent-alpha-3);
  padding: 0.375rem;
  margin-top: 0.125rem;
  margin-left: 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.an-collapse-btn:hover {
  color: var(--vst-accent);
  background: var(--vst-accent-alpha-05);
}

.an-collapse-btn[aria-expanded="false"] i {
  transform: rotate(-90deg);
}

.an-collapse-btn i {
  transition: transform 0.3s var(--vst-transition);
}

/* ============================================================
   ABO ITEMS
   ============================================================ */
.an-abo-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  color: inherit;
  transition: all 0.2s;
}

.an-abo-item:hover {
  color: inherit;
}

.an-abo-item:hover .an-abo-title {
  color: var(--vst-accent-bright);
}

.an-abo-info {
  flex: 1;
  min-width: 0;
}

.an-abo-title {
  color: var(--vst-accent);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s;
  margin: 0;
  font-family: var(--vst-font-sans);
}

.an-abo-desc {
  font-size: 0.75rem;
  color: var(--vst-text-alpha-35);
  margin: 0.25rem 0 0;
}

.an-abo-price {
  text-align: right;
  flex-shrink: 0;
}

.an-price-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--vst-text-primary);
  font-variant-numeric: tabular-nums;
}

.an-price-info {
  display: block;
  font-size: 0.625rem;
  color: var(--vst-text-alpha-25);
  line-height: 1.3;
  margin-top: 0.125rem;
}

.an-divider {
  height: 1px;
  background: linear-gradient(to right, var(--vst-accent-alpha-1), transparent);
}

/* ============================================================
   OUTLINE BUTTON
   ============================================================ */
.an-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--vst-accent);
  border: 1px solid var(--vst-accent-alpha-2);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  transition: all 0.3s var(--vst-transition);
}

.an-btn-outline:hover {
  color: var(--vst-accent-bright);
  border-color: var(--vst-accent-alpha-4);
  background: var(--vst-accent-alpha-05);
}

.an-btn-outline i {
  transition: transform 0.3s;
}

.an-btn-outline:hover i {
  transform: translateX(3px);
}

.an-btn-close{
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--vst-accent);
  border: 1px solid var(--vst-accent-alpha-2);
  border-radius: 6px;
  padding: 0.125rem 0.5rem;
  transition: all 0.3s var(--vst-transition);
  box-sizing: content-box;
  background: var(--vst-accent-alpha-05);
}
.an-btn-close:hover{
 border-color: var(--vst-accent-alpha-6);
 color: var(--vst-accent-bright);
}

h2.modal-title{
	color: var(--vst-accent);
}



div#globalModalBody.modal-body > div.list-group > div.an-list > div.an-list-item > h2{
	color: var(--vst-accent);
}
/* ============================================================
   ALBUM COVER
   ============================================================ */
.an-album-cover-link {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.an-album-cover {
  max-width: 250px;
  width: 100%;
  display: block;
  transition: transform 0.5s var(--vst-transition);
}

.an-album-cover-link:hover .an-album-cover {
  transform: scale(1.05);
}

.an-album-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent, transparent);
  opacity: 0;
  transition: opacity 0.4s;
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
}

.an-album-cover-link:hover .an-album-overlay {
  opacity: 1;
}

.an-album-overlay-text {
  color: var(--vst-white-alpha-9);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  transform: translateY(8px);
  transition: transform 0.4s var(--vst-transition);
}

.an-album-cover-link:hover .an-album-overlay-text {
  transform: translateY(0);
}

/* ============================================================
   LIST ITEMS (Lieder, Interpreten)
   ============================================================ */
.an-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* TODO #F8: border-bottom entfernt (Betreiber-Wunsch), mehr Abstand zwischen den Items */
.an-list-item {
  border-bottom: none;
  margin-bottom: 0.65rem;
}

.an-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  color: inherit;
  transition: all 0.2s;
}

.an-list-link:hover {
  color: inherit;
}

.an-list-link:hover .an-list-text {
  color: var(--vst-accent);
}

.an-list-link:hover .an-list-dot {
  background: var(--vst-accent);
}

.an-list-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vst-accent-alpha-3);
  flex-shrink: 0;
  margin-right: 0.625rem;
  transition: background 0.2s;
}

.an-list-text {
  flex: 1;
  font-size: 0.875rem;
  color: var(--vst-text-alpha-75);
  transition: color 0.2s;
}

.an-list-date {
  font-size: 0.75rem;
  color: var(--vst-text-alpha-25);
  flex-shrink: 0;
  margin-left: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ALBUM ROW (Neue Alben)
   ============================================================ */
.an-album-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem;
  margin: 0 -0.625rem;
  border-radius: 0.75rem;
  color: inherit;
  transition: all 0.3s var(--vst-transition);
}

.an-album-row:hover {
  background: var(--vst-accent-alpha-05);
  color: inherit;
}

.an-album-row + .an-album-row {
  margin-top: 0.5rem;
}

.an-album-thumb {
  width: 68px;
  height: 68px;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--vst-accent-alpha-1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s;
}

.an-album-row:hover .an-album-thumb {
  border-color: var(--vst-accent-alpha-25);
}

.an-album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--vst-transition);
}

.an-album-row:hover .an-album-thumb img {
  transform: scale(1.1);
}

.an-album-info {
  flex: 1;
  min-width: 0;
}

.an-album-date {
  display: block;
  font-size: 0.75rem;
  color: var(--vst-accent-alpha-5);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.25rem;
}

.an-album-name {
  display: block;
  font-size: 0.875rem;
  color: var(--vst-text-alpha-75);
  line-height: 1.4;
  transition: color 0.2s;
}

.an-album-row:hover .an-album-name {
  color: var(--vst-accent);
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.an-section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.an-section-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--vst-accent-overlay), transparent);
}

.an-section-divider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vst-accent-alpha-3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.an-footer {
  margin-top: 3rem;
  background: var(--vst-bg-darker);
}

.an-footer-link {
  color: var(--vst-text-alpha-4);
  font-size: 0.875rem;
  transition: color 0.3s;
}

.an-footer-link:hover {
  color: var(--vst-accent);
}

.an-footer-sep {
  color: var(--vst-accent-overlay);
}
.an-footer-nav {
  gap: 2rem;
}
.an-footer-nav .an-footer-link {
  white-space: nowrap;
}

.an-footer-copy {
  font-size: 0.875rem;
  color: var(--vst-text-alpha-3);
}

.an-footer-link-gold {
  color: var(--vst-accent-alpha-5);
  transition: color 0.3s;
}

.an-footer-link-gold:hover {
  color: var(--vst-accent);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.an-fade-in {
  animation: fadeIn 0.6s var(--vst-transition) both;
}

.an-fade-in-up {
  animation: fadeInUp 0.6s var(--vst-transition) both;
}

/* ============================================================
   PAGE LAYOUT (for subpages - page.html)
   ============================================================ */
.an-page-hero {
  position: relative;
  height: 180px;
  overflow: hidden;
}

@media (min-width: 768px) { .an-page-hero { height: 220px; } }

.an-page-title {
  font-family: var(--vst-font-serif);
  font-size: 1.5rem;
  color: var(--vst-text-primary);
  letter-spacing: 0.02em;
  margin: 0;
}

@media (min-width: 768px) { .an-page-title { font-size: 1.875rem; } }

.an-page-content {
  min-height: 400px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Loading Spinner */
.an-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 5rem 0;
}

.an-spinner-ring {
  width: 40px;
  height: 40px;
  border: 2px solid var(--vst-accent-alpha-3);
  border-top-color: var(--vst-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.an-spinner-text {
  font-size: 0.875rem;
  color: var(--vst-text-alpha-3);
}

/* ============================================================
   VMA CONTENT STYLES (for proxied content)
   ============================================================ */
.vma-content {
  color: var(--vst-text-primary);
  font-family: var(--vst-font-sans);
  line-height: 1.7;
}

.vma-content h1,
.vma-content h2,
.vma-content h3,
.vma-content h4 {
  font-family: var(--vst-font-serif);
  color: var(--vst-accent);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}

.vma-content h1 { font-size: 1.75rem; }
.vma-content h2 { font-size: 1.4rem; }
.vma-content h3 { font-size: 1.15rem; }

.vma-content a {
  color: var(--vst-accent);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}

.vma-content a:hover {
  color: var(--vst-accent-bright);
}

/* Tables */
.vma-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1rem 0;
  font-size: 0.875rem;
}

.vma-content table thead th {
  background: var(--vst-accent-overlay-soft);
  color: var(--vst-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--vst-accent-overlay);
  white-space: nowrap;
}

.vma-content table tbody tr {
  transition: background 0.2s;
}

.vma-content table tbody tr:hover {
  background: var(--vst-accent-alpha-04);
}

.vma-content table tbody td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--vst-accent-alpha-06);
  color: var(--vst-text-primary);
  vertical-align: middle;
}

.vma-content table tbody td a {
  color: var(--vst-text-primary);
  transition: color 0.2s;
}

.vma-content table tbody td a:hover {
  color: var(--vst-accent);
}

/* Images */
.vma-content img {
  border-radius: 0.5rem;
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 100%;
  height: auto;
}

.vma-content a:hover img {
  transform: scale(1.02);
  box-shadow: 0 4px 20px var(--vst-accent-overlay);
}

/* Grid */
.vma-content .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.vma-content [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 1.5rem;
}

.vma-content .col-md-4 { width: 33.333%; }
.vma-content .col-md-6 { width: 50%; }
.vma-content .col-md-12,
.vma-content .col-lg-12 { width: 100%; }
.vma-content .col-lg-6 { width: 50%; }

@media (max-width: 768px) {
  .vma-content .col-md-4,
  .vma-content .col-md-6,
  .vma-content .col-lg-6 {
    width: 100%;
  }
}

/* Description blocks */
.vma-content .description-block {
  padding: 1rem;
  text-align: center;
  border-right: none !important;
  transition: transform 0.3s, background 0.3s;
  border-radius: 0.5rem;
}

.vma-content .description-block:hover {
  background: var(--vst-accent-alpha-05);
  transform: translateY(-2px);
}

.vma-content .description-block img {
  display: block;
  margin: 0 auto 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.vma-content .description-block a {
  color: var(--vst-text-alpha-75);
  font-size: 0.875rem;
  line-height: 1.4;
}

.vma-content .description-block a:hover {
  color: var(--vst-accent);
}

/* Buttons */
.vma-content .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  border: 1px solid var(--vst-accent-alpha-2);
  color: var(--vst-accent);
  background: transparent;
  cursor: pointer;
}

.vma-content .btn:hover {
  background: var(--vst-accent-overlay-soft);
  border-color: var(--vst-accent-alpha-35);
}

.vma-content .btn-link { border: none; padding: 0.25rem 0.5rem; }
.vma-btn-solid {  text-decoration: none !important;  border: none !important;  background: var(--vst-accent) !important;  color: var(--vst-bg-card-solid) !important;  font-weight: 600;  font-size: 1rem;  padding: 0.5rem 1.25rem !important;  border-radius: 0.375rem;  display: inline-block;  cursor: pointer;  transition: filter 0.2s;}
.vma-btn-solid:hover { filter: brightness(1.1); }
.vma-content .btn-primary { background: var(--vst-accent); color: var(--vst-bg-card-solid); border-color: transparent; }
.vma-content .btn-primary:hover { background: var(--vst-accent-bright); border-color: transparent; }
.vma-content .btn-success { background: var(--vst-success); color: var(--vst-white); border-color: transparent; }
.vma-content .btn-success:hover { filter: brightness(1.1); background: var(--vst-success); border-color: transparent; }
.vma-content .btn-danger { background: var(--vst-danger); color: var(--vst-white); border-color: transparent; }
.vma-content .btn-warning { background: var(--vst-warning); color: var(--vst-bg-card-solid); border-color: transparent; }
.vma-content .btn-box-tool { background: transparent; border: none; color: var(--vst-text-alpha-3); padding: 0.25rem; font-size: 0.75rem; }

/* Labels / Badges */
.vma-content .label,
.vma-content .badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vma-content .label-info, .vma-content .badge-info { background: var(--vst-accent-overlay); color: var(--vst-accent); }
.vma-content .label-success, .vma-content .badge-success { background: var(--vst-success-overlay); color: var(--vst-success-bright); }
.vma-content .label-warning, .vma-content .badge-warning { background: var(--vst-warning-overlay); color: var(--vst-warning-bright); }
.vma-content .label-danger, .vma-content .badge-danger { background: var(--vst-danger-overlay); color: var(--vst-danger-bright); }

/* Forms */
.vma-content input[type="text"],
.vma-content input[type="email"],
.vma-content input[type="password"],
.vma-content input[type="search"],
.vma-content textarea,
.vma-content select {
  background: var(--vst-bg-modal);
  border: 1px solid var(--vst-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--vst-text-primary);
  font-size: 0.875rem;
  transition: border-color 0.2s;
  width: 100%;
  /**max-width: 300px;**/
}

.vma-content input:focus,
.vma-content textarea:focus,
.vma-content select:focus {
  border-color: var(--vst-accent-alpha-35);
  outline: none;
}

/* Pagination */
.vma-content .pagination,
.vma-content .dataTables_paginate {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.vma-content .pagination li,
.vma-content .paginate_button { list-style: none; }

.vma-content .pagination a,
.vma-content .paginate_button a,
.vma-content .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  color: var(--vst-text-muted);
  border: 1px solid var(--vst-accent-alpha-1);
  transition: all 0.2s;
  cursor: pointer;
  background: transparent;
}

.vma-content .pagination .active a,
.vma-content .paginate_button.current {
  background: var(--vst-accent-overlay);
  color: var(--vst-accent);
  border-color: var(--vst-accent-alpha-3);
}

.vma-content .pagination a:hover,
.vma-content .paginate_button:hover {
  background: var(--vst-accent-overlay-soft);
  color: var(--vst-accent);
}

/* DataTables */
.vma-content .dataTables_info { color: var(--vst-text-alpha-3); font-size: 0.8rem; margin-top: 0.75rem; }
.vma-content .dataTables_length,
.vma-content .dataTables_filter { margin-bottom: 1rem; color: var(--vst-text-alpha-4); font-size: 0.85rem; }
.vma-content .dataTables_length select,
.vma-content .dataTables_filter input { max-width: 150px; display: inline-block; }

/* Utilities */
.vma-content .text-center { text-align: center; }
.vma-content .text-right { text-align: right; }
.vma-content .text-muted { color: var(--vst-text-alpha-35); }
.vma-content .pull-right { float: right; }
.vma-content .border-right { border-right: none !important; }
.vma-content .border-0 { border: none !important; }
.vma-content .center-block { display: block; margin-left: auto; margin-right: auto; }

/* Hide unnecessary elements */
.vma-content .modal:not(.show),
.vma-content .navbar,
.vma-content .sidebar,
.vma-content .main-header,
.vma-content .main-footer,
.vma-content script,
.vma-content noscript,
.vma-content .breadcrumb { display: none !important; }

/* Font Awesome fallback */
.vma-content .fa { display: inline-block; width: 1em; height: 1em; }
.vma-content .fa-minus::before { content: "\2212"; }
.vma-content .fa-plus::before { content: "+"; }

/* Responsive tables */
@media (max-width: 768px) {
  .vma-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   DATATABLES DARK THEME OVERRIDES
   ============================================================ */
.dataTables_wrapper {
  color: var(--vst-text-primary);
}

.dataTables_wrapper .dataTables_filter input {
  background: var(--vst-bg-card-alpha-6) !important;
  border: 1px solid var(--vst-border) !important;
  color: var(--vst-text-primary) !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  transition: border-color 0.3s;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--vst-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--vst-accent-overlay) !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
  color: var(--vst-text-muted) !important;
  font-family: var(--vst-font-sans);
  font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length select {
  background: var(--vst-bg-card-alpha-6) !important;
  border: 1px solid var(--vst-border) !important;
  color: var(--vst-text-primary) !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.5rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 1px solid var(--vst-border) !important;
  color: var(--vst-text-muted) !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
  padding: 0.4rem 0.8rem !important;
  transition: all 0.3s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--vst-accent-alpha-1) !important;
  border-color: var(--vst-accent) !important;
  color: var(--vst-accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--vst-accent) !important;
  border-color: var(--vst-accent) !important;
  color: var(--vst-bg-deep) !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed;
}

table.dataTable thead th {
  border-bottom: 2px solid var(--vst-accent) !important;
  color: var(--vst-accent) !important;
  font-family: var(--vst-font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem !important;
}

table.dataTable tbody td {
  border-color: var(--vst-accent-alpha-06) !important;
  color: var(--vst-text-primary);
  font-family: var(--vst-font-sans);
  font-size: 0.9rem;
  padding: 0.65rem 1rem !important;
  vertical-align: middle;
}

table.dataTable tbody tr:hover td {
  background: var(--vst-accent-alpha-06) !important;
}

table.dataTable tbody td a {
  color: var(--vst-accent-bright);
  text-decoration: none;
  transition: color 0.3s;
}

table.dataTable tbody td a:hover {
  color: var(--vst-accent);
  text-decoration: underline;
}

table.table-dark {
  --bs-table-bg: transparent !important;
  --bs-table-hover-bg: var(--vst-accent-alpha-06) !important;
  --bs-table-border-color: var(--vst-accent-alpha-06) !important;
}

/* DataTables sorting icons */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
  opacity: 0.3;
}

table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
  opacity: 0.8;
  color: var(--vst-accent);
}


/* ====
 * Autocomplete
 */

ul.ui-widget.ui-widget-content{
	border: 1px solid var(--vst-accent-overlay-soft) !important;
	border-radius: 5px !important;
	padding: 10px;
	background: var(--vst-text-alpha-9) !important;
}
div#searchFront{

}
li.ui-menu-item a{
	width: 100%;
	display: block;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: var(--vst-accent) !important;
    font-weight: bold !important;
    color: var(--vst-text-primary); !important;
    border: 1px solid var(--vst-accent-overlay-soft) !important;
	border-radius: 5px !important;
} 

/* Uebungstagebuch-Heatmap */
.vma-heatmap { margin: 10px 0 4px 0; }
.vma-hm-grid { display: flex; gap: 4px; }
.vma-hm-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.vma-hm-days span { font-size: 10px; line-height: 1; color: var(--vst-text-muted); }
.vma-hm-cells { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; flex: 1; }
.vma-hm-cell { width: 100%; aspect-ratio: 1 / 1; border-radius: 3px; display: inline-block; }
.vma-hm-cell[data-level="0"] { background: var(--vst-surface-overlay-3); border: 1px solid var(--vst-border); }
.vma-hm-cell[data-empty="1"] { background: transparent; border: 1px dashed var(--vst-border); }
.vma-hm-cell[data-level="1"] { background: var(--vst-success-soft-1); }
.vma-hm-cell[data-level="2"] { background: var(--vst-success-soft-2); }
.vma-hm-cell[data-level="3"] { background: var(--vst-success-soft-3); }
.vma-hm-cell[data-level="4"] { background: var(--vst-success-soft-4); }
.vma-legend-cell { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 3px; display: inline-block; }
.vma-legend-cell[data-level="0"] { background: var(--vst-surface-overlay-3); border: 1px solid var(--vst-border); }
.vma-legend-cell[data-level="1"] { background: var(--vst-success-soft-1); }
.vma-legend-cell[data-level="2"] { background: var(--vst-success-soft-2); }
.vma-legend-cell[data-level="3"] { background: var(--vst-success-soft-3); }
.vma-legend-cell[data-level="4"] { background: var(--vst-success-soft-4); }
.vma-hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; color: var(--vst-text-muted); }
.vma-hm-details summary { cursor: pointer; color: var(--vst-accent); }

/* Sortier-Indikator fuer klickbare Spaltenueberschriften */
table thead th.vma-sort-asc::after { content: " \25B4"; font-size: 0.7em; opacity: 0.7; }
table thead th.vma-sort-desc::after { content: " \25BE"; font-size: 0.7em; opacity: 0.7; }
table thead th { cursor: pointer; user-select: none; }

/* Cart-Icon in der Navbar: groesser, ohne Navbar-Hoehe zu erhoehen */
.an-icon-btn.an-cart-btn { padding: 0.15rem; line-height: 1; }
.an-icon-btn.an-cart-btn .bi-cart3 { font-size: 1.6rem; line-height: 1; }
.an-icon-btn.an-cart-btn .bi-cart3 + .badge { font-size: 0.65rem; }

/* ============================================================
   EHEMALS VMA-STANDALONE.CSS (Bootstrap-Subset)
   ============================================================ */

/* ============================================================
   VMA STANDALONE CSS (Phase 2 der CSS/JS-Migration)
   ============================================================
   Eigenes Bootstrap-Subset: deckt nur die Klassen ab, die im
   Projekt-Markup tatsaechlich vorkommen (Inventur 2026-10-03).
   Basis-Design (Farben, Fonts, Karten, Navbar, Footer) kommt
   aus alpine-noir.css, das weiterhin VOR dieser Datei geladen
   wird. Siehe doc/UMSTELLUNG-CSS-JS.md
   ============================================================ */



/* ---------- Reset / Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--vst-font-sans);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem; line-height: 1.2; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--vst-accent); }
img, video { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
dl, dd { margin: 0; }
table { border-collapse: collapse; }
button { font-family: inherit; }
small { font-size: 0.875em; }

/* ---------- Container ---------- */
.container,
.container-fluid { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto; }





/* ---------- Grid ---------- */
.row { display: flex; flex-wrap: wrap; margin-right: -0.75rem; margin-left: -0.75rem; }
[class*="col-"] { padding-right: 0.75rem; padding-left: 0.75rem; }
.g-4 { margin-right: -1.5rem; margin-left: -1.5rem; }
.g-4 > [class*="col-"] { padding-right: 1.5rem; padding-left: 1.5rem; }

.col { flex: 1 0 0%; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* ---------- Grid Breakpoints (muessen NACH .col-12 Basis stehen) ---------- */

@media (min-width: 576px) { .col-sm-1 { flex: 0 0 auto; width: 8.3333%; } .col-sm-2 { flex: 0 0 auto; width: 16.6667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.3333%; } .col-sm-5 { flex: 0 0 auto; width: 41.6667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.3333%; } .col-sm-8 { flex: 0 0 auto; width: 66.6667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.3333%; } .col-sm-11 { flex: 0 0 auto; width: 91.6667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } .container { max-width: 540px; } }

@media (min-width: 768px) { .col-md-1 { flex: 0 0 auto; width: 8.3333%; } .col-md-2 { flex: 0 0 auto; width: 16.6667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.3333%; } .col-md-5 { flex: 0 0 auto; width: 41.6667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.3333%; } .col-md-8 { flex: 0 0 auto; width: 66.6667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.3333%; } .col-md-11 { flex: 0 0 auto; width: 91.6667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } .container { max-width: 720px; } .mx-sm-0 { margin-right: 0 !important; margin-left: 0 !important; } }

@media (min-width: 992px) { .col-lg-1 { flex: 0 0 auto; width: 8.3333%; } .col-lg-2 { flex: 0 0 auto; width: 16.6667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.3333%; } .col-lg-5 { flex: 0 0 auto; width: 41.6667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.3333%; } .col-lg-8 { flex: 0 0 auto; width: 66.6667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.3333%; } .col-lg-11 { flex: 0 0 auto; width: 91.6667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } .container { max-width: 960px; } .mx-lg-2, .px-lg-2 { --vma-x: 0.5rem; } .px-lg-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .mx-lg-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .navbar-expand-lg .navbar-collapse { display: flex !important; } .navbar-expand-lg .navbar-toggler { display: none; } .navbar-expand-lg .navbar-nav { flex-direction: row; align-items: center; } .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.75rem; padding-left: 0.75rem; } .d-lg-flex { display: flex !important; } }

@media (min-width: 1200px) { .col-xl-1 { flex: 0 0 auto; width: 8.3333%; } .col-xl-2 { flex: 0 0 auto; width: 16.6667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.3333%; } .col-xl-5 { flex: 0 0 auto; width: 41.6667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.3333%; } .col-xl-8 { flex: 0 0 auto; width: 66.6667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.3333%; } .col-xl-11 { flex: 0 0 auto; width: 91.6667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } .container { max-width: 1140px; } }

@media (min-width: 1400px) { .col-xxl-1 { flex: 0 0 auto; width: 8.3333%; } .col-xxl-2 { flex: 0 0 auto; width: 16.6667%; } .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-4 { flex: 0 0 auto; width: 33.3333%; } .col-xxl-5 { flex: 0 0 auto; width: 41.6667%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } .col-xxl-7 { flex: 0 0 auto; width: 58.3333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.6667%; } .col-xxl-9 { flex: 0 0 auto; width: 75%; } .col-xxl-10 { flex: 0 0 auto; width: 83.3333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.6667%; } .col-xxl-12 { flex: 0 0 auto; width: 100%; } .container { max-width: 1320px; } }
/* ---------- Display / Visibility ---------- */
.d-flex, .d-flex-row { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-fill { flex: 1 1 auto; }
.flex-shrink-1 { flex-shrink: 1; }
.align-items-center { align-items: center; }
.align-content-end { align-content: end; }
.align-middle { vertical-align: middle; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.justify-content-start { justify-content: flex-start; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }
.d-none { display: none; }
.hidden, .hide { display: none; }
@media (min-width: 768px) {
  .d-md-flex { display: flex; }
  .d-md-none { display: none; } .container { max-width: 1140px; } .container { max-width: 1320px; }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.collapse:not(.show) { display: none; }
.collapsed .collapse { display: none; }
.fade { transition: opacity 0.15s linear; }
.fade:not(.show) { opacity: 0; }

/* ---------- Position / Float / Order ---------- */
.position-relative { position: relative; }
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.float-right, .float-end { float: right; }
.pull-right, .pull-end { float: right; }
.pull-start { float: left; }
.top-0 { top: 0; }
.start-100 { left: 100%; }
.translate-middle { transform: translate(-50%, -50%); }
.position-absolute { position: absolute; }

/* ---------- Sizing ---------- */
.w-25 { width: 25%; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.mw-100 { max-width: 100%; }

/* ---------- Spacing (nur vorkommende Werte) ---------- */
.m-0 { margin: 0 !important; } .m-4 { margin: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; } .ms-auto { margin-left: auto !important; }
.me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; } .me-4 { margin-right: 1.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.row > .an-section-divider { flex-basis: 100%; width: 100%; }

.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.p-0 { padding: 0 !important; } .p-2 { padding: 0.5rem !important; } .p-5 { padding: 3rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.pt-0 { padding-top: 0 !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.ps-0 { padding-left: 0 !important; } .ps-1 { padding-left: 0.25rem !important; } .ps-4 { padding-left: 1.5rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.no-padding { padding: 0 !important; }

/* ---------- Text ---------- */
.text-center { text-align: center; }
.text-end, .text-right { text-align: right; }
.text-left, .text-start { text-align: left; }
.text-white { color: var(--vst-text-primary) !important; }
.text-muted { color: var(--vst-text-muted) !important; }
.text-success, .text-green { color: var(--vst-success) !important; }
.text-danger { color: var(--vst-danger) !important; }
.text-warning { color: var(--vst-warning) !important; }
.text-info { color: var(--vst-info) !important; }
.fw-bolder { font-weight: 700; }
.font-weight-normal { font-weight: 400; }
.fs-2 { font-size: 1.75rem; }
.fs-3 { font-size: 1.5rem; }
.fs-4 { font-size: 1.25rem; }
.fs-5 { font-size: 1.1rem; }
.fs-6 { font-size: 0.95rem; }
.small { font-size: 0.875em; }
.list-unstyled { list-style: none; padding-left: 0; }
.list-inline { list-style: none; padding-left: 0; }
.list-inline-item { display: inline-block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--vst-accent); color: var(--vst-bg-card-solid); }
.btn-success { background: var(--vst-success); color: var(--vst-white); }
.btn-danger { background: var(--vst-danger); color: var(--vst-white); }
.btn-warning { background: var(--vst-warning); color: var(--vst-bg-card-solid); }
.btn-default { background: var(--vst-surface-overlay-3); color: inherit; border-color: var(--vst-border); }
.btn-link { color: var(--vst-accent); text-decoration: underline; border: none; background: none; }
.btn-flat { border: none; }
.btn-outline-primary { background: transparent; color: var(--vst-accent); border-color: var(--vst-accent); }
.btn-outline-success { background: transparent; color: var(--vst-success); border-color: var(--vst-success); }
.btn-close {
  background: none; border: none; font-size: 1.2rem;
  cursor: pointer; color: inherit; line-height: 1;
  width: 1.6rem; height: 1.6rem;
}
.btn-close::before { content: "\2715"; display: inline-block; font-size: 1.1rem; line-height: 1.6rem; opacity: .7; }
.btn-close:hover::before { opacity: 1; }
.bt-sm { padding: 0.15rem 0.4rem; font-size: 0.8rem; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; }
.form-control, .form-select {
  display: block; width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem; font-family: inherit;
  background: var(--vst-surface-overlay-2);
  border: 1px solid var(--vst-border);
  border-radius: 0.375rem;
  color: inherit;
}
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--vst-accent);
  box-shadow: 0 0 0 0.2rem var(--vst-accent-overlay);
}
.form-control-sm { padding: 0.2rem 0.5rem; font-size: 0.875rem; }
.btn.form-control, .form-control.btn {
  background-color: transparent;
  border-color: transparent;
}
.btn-primary.form-control, .form-control.btn-primary { background: var(--vst-accent); color: var(--vst-bg-card-solid); border-color: transparent; }
.btn-success.form-control, .form-control.btn-success { background: var(--vst-success); color: var(--vst-white); border-color: transparent; }
.btn-danger.form-control, .form-control.btn-danger { background: var(--vst-danger); color: var(--vst-white); border-color: transparent; }
.btn-warning.form-control, .form-control.btn-warning { background: var(--vst-warning); color: var(--vst-bg-card-solid); border-color: transparent; }
.btn-default.form-control, .form-control.btn-default { background: var(--vst-surface-overlay-3); color: inherit; border-color: var(--vst-border); }

.form-check { display: block; min-height: 1.4rem; padding-left: 1.6em; margin-bottom: 0.5rem; }
.form-check-input { float: left; margin-left: -1.6em; margin-top: 0.25em; width: 1em; height: 1em; }
.form-check-label { display: inline; }
.form-inline { display: flex; flex-flow: row wrap; gap: 0.5rem; align-items: center; }
label { display: inline-block; margin-bottom: 0.35rem; }
input, select, textarea { font-family: inherit; }
.input-group { display: flex; }
.input-group-text {
  display: flex; align-items: center;
  padding: 0.375rem 0.75rem;
  background: var(--vst-surface-overlay-2);
  border: 1px solid var(--vst-border); border-radius: 0.375rem 0 0 0.375rem;
}
.input-group-btn .btn { border-radius: 0 0.375rem 0.375rem 0; position: relative; z-index: 2; }

/* ---------- Tables ---------- */
.table { width: 100%; margin-bottom: 1rem; }
.table th, .table td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.table thead th { border-bottom: 2px solid var(--vst-border); font-weight: 600; }
.table tbody tr { border-bottom: 1px solid var(--vst-border); }
.table-hover tbody tr:hover { background: var(--vst-surface-overlay-2); }
.table-striped tbody tr:nth-child(odd) { background: var(--vst-surface-overlay-1); }
.table-dark { background: var(--vst-bg-card); color: var(--vst-text-primary); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Navbar ---------- */
.navbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.navbar .container, .navbar .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.navbar-brand { font-size: 1.25rem; margin-right: 1rem; white-space: nowrap; font-weight: 700; }
.navbar-nav { display: flex; flex-direction: column; list-style: none; padding-left: 0; margin: 0; }
.nav-item { margin: 0 0.25rem; }
.nav-link { display: block; padding: 0.5rem 0.75rem; }
.navbar-collapse { flex-grow: 1; align-items: center; }
.navbar-toggler {
  background: none; border: 1px solid var(--vst-border);
  border-radius: 0.375rem; padding: 0.25rem 0.5rem;
  color: inherit; font-size: 1.2rem; cursor: pointer;
}
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-collapse {
    display: none;
    flex-basis: 100%;
  }
  .navbar-expand-lg .navbar-collapse.show { display: block; }
}
/* ---------- Collections-Chips (Lied-Index, clientseitiger Filter ohne Reload) ---------- */
.vma-coll-bar { margin-bottom: 0.75rem; }
.vma-coll-chips { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; }
.vma-coll-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.7rem; border: 1px solid var(--vst-border);
  border-radius: 999px; background: none; color: inherit;
  font-size: 0.875rem; line-height: 1.4; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vma-coll-chip:hover { background: var(--vst-accent-overlay-soft, rgba(0,0,0,0.05)); border-color: var(--vst-accent); }
.vma-coll-chip.active { background: var(--vst-accent-overlay-soft, rgba(0,0,0,0.08)); border-color: var(--vst-accent); color: var(--vst-accent); }
.vma-coll-chip-count {
  font-size: 0.72rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--vst-border); color: inherit; opacity: 0.9;
}
.vma-coll-chip.active .vma-coll-chip-count { background: var(--vst-accent); color: var(--vst-bg-card-solid, #fff); }
.vma-coll-filterinfo { margin: 0.35rem 0; text-align: right; }
.nav-tabs { display: flex; border-bottom: 1px solid var(--vst-border); list-style: none; padding-left: 0; }
.nav-tabs .nav-link { border: none; margin-bottom: -1px; }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--vst-accent); color: var(--vst-accent); }

/* ---------- Dropdown ---------- */
.dropdown { position: relative; }
.dropdown-toggle::after {
  display: inline-block; margin-left: 0.35em; vertical-align: middle;
  content: ""; border: solid currentColor; border-width: 0 2px 2px 0;
  padding: 2px; transform: rotate(45deg);
}
.dropdown-menu {
  position: absolute; z-index: 1050;
  min-width: 12rem; padding: 0.5rem 0;
  background: var(--vst-bg-card-solid); border: 1px solid var(--vst-border);
  border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none; margin: 0;
 list-style: none; padding-left: 0;}
.dropdown-menu.show { display: block; }
.dropdown-item { display: block; width: 100%; padding: 0.4rem 1rem; clear: both; white-space: nowrap; }
.dropdown-item:hover { background: var(--vst-accent-overlay-soft); }
.dropdown-menu-end, .dropdown-menu-right { right: 0; left: auto; }
.nav-item.dropdown { position: relative; }
.nav-item.dropdown > .dropdown-menu { top: 100%; left: 0; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; z-index: 1060;
  display: none; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  outline: 0;
}
.modal.show { display: block; }
.modal-dialog { position: relative; width: auto; max-width: 600px; margin: 1.75rem auto; padding: 0 1rem; }
.modal-xl { max-width: 1100px; }
.modal-content {
  background: var(--vst-bg-card-solid); color: var(--vst-text-primary);
  border: 1px solid var(--vst-border); border-radius: 0.75rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; }
.modal-title { margin: 0; font-size: 1.25rem; }
.modal-body { padding: 1rem 1.5rem; }
.modal-footer { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 1rem 1.5rem; }
.modal.fade .modal-dialog { transition: transform 0.2s ease-out; transform: translateY(-24px); }
.modal.show .modal-dialog { transform: none; }
/* ---------- wLiedDateien (TODO #F8): Vollbild-Modal + Download-Erschwerung ---------- */
.modal-fullscreen .modal-dialog { max-width: 100%; width: 100%; margin: 0; padding: 0; height: 100%; }
.modal-fullscreen .modal-content { height: 100%; border-radius: 0; border: 0; }
.modal-fullscreen .modal-body { height: calc(100% - 4.5rem); overflow-y: auto; padding: 0.5rem; }
.vma-protector { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.vma-pdfjs-view { height: calc(100vh - 7rem); overflow-y: auto; user-select: none; -webkit-user-select: none; background: #fff; }
.vma-pdfjs-view canvas { display: block; margin: 12px auto; user-select: none; -webkit-user-select: none; }
.vma-pdfjs-view canvas::selection { background: none; }
.vma-mediaview-video { max-height: calc(100vh - 8rem); width: 100%; background: #000; }
.vma-mediaview-meta { font-size: 0.875rem; opacity: 0.8; }
/* TODO #U7: Audio-Player im Vollbild-Modal - volle Breite, theme-gerecht (vst-Variablen) */
.vma-audio-view { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 0.5rem; }
.vma-audio-view-head { display: flex; align-items: center; gap: 0.6rem; font-family: var(--vst-font-serif); font-size: 1.25rem; color: var(--vst-text-primary); margin-bottom: 1rem; padding: 0 0.25rem; }
.vma-audio-view-head i { font-size: 1.4rem; color: var(--vst-accent); }
.vma-audio-view-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vma-audio-view-player { display: block; width: 100%; height: 3rem; }
/* TODO #F8: Details-Box Footer-Metazeile (Erstellt + Aufrufe) klein und muted */
.vma-details-meta { font-size: 0.8rem; opacity: 0.65; border-top: 1px solid rgba(128,128,128,0.25); margin-top: 0.5rem; padding-top: 0.5rem; flex-wrap: wrap; }
/* TODO #F8: PNG/JPG im A4-Seitenverhaeltnis (Breite aus Modal-Hoehe abgeleitet), zentriert;
   PDFs laufen ueber den eingebetteten Browser-Viewer (richtiges Seitenverhaeltnis) und behalten volle Breite */
.vma-imgview { display: block; margin: 0 auto; max-height: calc(100vh - 7rem); width: auto; max-width: calc((100vh - 7rem) * 0.707); }
/* TODO #F8: Druckschutz gekaufter/geteilter Inhalte - Druck/Print-to-PDF liefert eine leere Seite.
   Nur greifend, wenn das Modal offen ist (body.modal-open) - normales Seitendrucken unberuehrt. */
@media print {
  body.modal-open .vma-printprotected, body.modal-open .vma-printprotected * { display: none !important; }
}
.vma-printprotected { position: relative; }
/* Hinweis im geschuetzten Modal (Druck blockiert) */
.vma-printprotected::after {
  content: "Druckfunktion für diesen Inhalt deaktiviert.";
  position: absolute; top: 0.25rem; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; opacity: 0.45; pointer-events: none;
}

/* ---------- Cards / Boxes ---------- */
.card { background: var(--vst-bg-card); border: 1px solid var(--vst-border); border-radius: 0.75rem; }
.card-header { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--vst-border); }
.card-body { padding: 1.25rem; }
.card-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--vst-border); }
.card-text { margin-bottom: 0; }

/* ---------- Badges / Alerts ---------- */
.badge {
  display: inline-block; padding: 0.35em 0.65em;
  font-size: 0.75em; font-weight: 600; line-height: 1;
  border-radius: 9999px;
}
.bg-success { background: var(--vst-success) !important; color: var(--vst-white) !important; }
.bg-danger { background: var(--vst-danger) !important; color: var(--vst-white) !important; }
.bg-light { background: var(--vst-text-primary) !important; color: var(--vst-bg-card-solid) !important; }
.alert { padding: 0.75rem 1.25rem; border-radius: 0.5rem; margin-bottom: 1rem; border: 1px solid transparent; }

/* ---------- Pagination ---------- */
.pagination { display: flex; list-style: none; padding-left: 0; }
.page-link { display: block; padding: 0.375rem 0.75rem; border: 1px solid var(--vst-border); margin-left: -1px; }
.page-item:first-child .page-link { border-radius: 0.375rem 0 0 0.375rem; margin-left: 0; }
.page-item:last-child .page-link { border-radius: 0 0.375rem 0.375rem 0; }
.pagination-md .page-link { padding: 0.5rem 1rem; font-size: 1.1rem; }

/* ---------- Upload Drop-Zone (#S6, ersetzt Legacy .upload-drop-zone aus geloeschter vma.css) ---------- */
.vma-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 1.5rem 1rem;
  margin: 1rem 0;
  text-align: center;
  border: 2px dashed var(--vst-border);
  border-radius: 0.75rem;
  color: var(--vst-text-alpha-4);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.vma-upload-drop i { color: var(--vst-accent-alpha-4); }
.vma-upload-drop.drop {
  border-color: var(--vst-accent);
  background: var(--vst-accent-alpha-05);
  color: var(--vst-text-primary);
}
.vma-upload-drop.drop i { color: var(--vst-accent); }

/* ---------- Progress ---------- */
.progress { display: flex; height: 1rem; background: var(--vst-surface-overlay-3); border-radius: 0.5rem; overflow: hidden; }
.progress-bar { background: var(--vst-accent); }

/* ---------- List Groups ---------- */
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 0.5rem; }
.list-group-item { padding: 0.75rem 1rem; border: 1px solid var(--vst-border); margin-bottom: -1px; }

/* ---------- Borders / Radius ---------- */
.border { border: 1px solid var(--vst-border) !important; }
.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-top { border-top: 1px solid var(--vst-border) !important; }
.border-bottom { border-bottom: 1px solid var(--vst-border) !important; }
.border-right { border-right: 1px solid var(--vst-border) !important; }
.border-secondary { border-color: var(--vst-muted-c) !important; }
.rounded-pill { border-radius: 9999px !important; }
.opacity-50 { opacity: 0.5; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; list-style: none; padding-left: 0; margin-bottom: 1rem; gap: 0.35rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding-right: 0.35rem; color: var(--vst-text-muted); }

/* ---------- Misc Project-Klassen (frueher Bootstrap/AdminLTE) ---------- */
.info-box {
  position: relative; display: block;
  background: var(--vst-bg-card);
  border: 1px solid var(--vst-border); border-radius: 0.75rem;
  margin-bottom: 1.25rem;
}
.box {
  position: relative; display: block;
  background: var(--vst-bg-card);
  border: 1px solid var(--vst-border); border-radius: 0.75rem;
  margin-bottom: 1.25rem;
}
.box-postmessage {  position: fixed;  top: 5.5rem;  left: 50%;  transform: translateX(-50%);  z-index: 1050;  min-width: 400px;  max-width: 90vw;  padding: 1.5rem 2rem;  text-align: center;  font-size: 1.25rem;  font-weight: 500;  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);}
.description-block, .description-header { margin-bottom: 0.75rem; }
.with-border { border-bottom: 1px solid var(--vst-border); }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.content-wrapper, .main-header, .content-header { width: 100%; }
.fa-spin { animation: vma-spin 1s linear infinite; }
@keyframes vma-spin { to { transform: rotate(360deg); } }
.timer-spinner { display: inline-block; animation: vma-spin 1s linear infinite; }
.vma-spinner {  display: inline-block;  width: 2.5rem;  height: 2.5rem;  border: 3px solid var(--vst-accent-alpha-2);  border-top-color: var(--vst-accent);  border-radius: 50%;  animation: vma-spin 0.8s linear infinite;}
.ui-front { z-index: 100; }
.an-fade-in-up { animation: vma-fadeup 0.5s ease-out both; }
@keyframes vma-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Autocomplete (vma-vanilla.js, ersetzt jQuery UI) ---------- */
.vma-ac-list {
  background: var(--vst-bg-card-solid);
  border: 1px solid var(--vst-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  scrollbar-width: auto;
  scrollbar-color: var(--vst-accent-alpha-45) transparent;
}
.vma-ac-list::-webkit-scrollbar { width: 12px; }
.vma-ac-list::-webkit-scrollbar-track { background: var(--vst-bg-deep); border-radius: 6px; }
.vma-ac-list::-webkit-scrollbar-thumb { background: var(--vst-accent-alpha-45); border-radius: 6px; }
.vma-ac-list::-webkit-scrollbar-thumb:hover { background: var(--vst-accent); }
.vma-ac-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.35rem 0;
}
.vma-ac-item, .vma-ac-cat {
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.vma-ac-item:hover, .vma-ac-item.vma-ac-active { background: var(--vst-border); }
.vma-ac-cat {
  color: var(--vst-text-muted);
  font-weight: 600;
  cursor: default;
  border-top: 1px solid var(--vst-border);
  margin-top: 0.2rem;
}
.ui-autocomplete { display: none; }

/* ---------- Slider (ersetzt FlexSlider) ---------- */
.flexslider { overflow-x: auto; scrollbar-width: thin; }
.flexslider .slides { display: flex; gap: 1rem; }
.flexslider .slides > div { flex: 0 0 auto; scroll-snap-align: center; }

/* ---------- Modal-Backdrop (ohne Bootstrap-JS) ---------- */
body.modal-open { overflow: hidden; }
.modal-open::after {
  content: "";
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1055;
}

/* Uebungstagebuch-Heatmap: siehe Abschnitt oben (keine Duplikate mehr) */

/* Sortier-Indikator fuer klickbare Spaltenueberschriften */
table thead th.vma-sort-asc::after { content: " \25B4"; font-size: 0.7em; opacity: 0.7; }
table thead th.vma-sort-desc::after { content: " \25BE"; font-size: 0.7em; opacity: 0.7; }
table thead th { cursor: pointer; user-select: none; }

/* VMA Chart (TODO #A18: Auswertungs-Basiskomponente, SVG ohne CDN) */
.vma-chart { width: 100%; min-height: 120px; }
.vma-chart svg { display: block; }
/* ============================================================
   MOBILE LAYOUT (TODO #M5/#M6, 2026-10-14): einfaches, robustes
   Smartphone-Muster: Zeile 1 = Brand links (schrumpft, Ellipsis)
   + Icon-Gruppe rechts; aufgeklapptes Menue = volle Breite,
   Dropdowns statisch inline (Bootstrap-Mobile-Standard).
   ============================================================ *//* Icon-Gruppe (Warenkorb + Toggler): nie schrumpfen, nie umbrechen */
.an-navbar .d-flex.order-lg-3 {  flex-shrink: 0;  flex-wrap: nowrap;  white-space: nowrap;}@media (max-width: 991.98px) {  /* Container: wrap NOETIG - die Collapse (flex-basis:100%) muss in die
     zweite Zeile brechen koennen; nowrap haelt sie als "3. Spalte" neben
     Brand+Icons (Live-Bug 21:20, Screenshots navbar-mobile_3/4) */
  .an-navbar .container {    flex-wrap: wrap;    align-items: center;  }  /* Brand fuellt den Rest zwischen Logo-Start und Icons, kuerzt sauber */
  .an-navbar .navbar-brand.an-brand {    flex: 1 1 auto;    min-width: 0;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    font-size: 1.05rem !important;    margin-right: 0.5rem;  }  /* Kompakte Icon-Paddings: mehr Platz fuer den Schriftzug */
  .an-navbar .an-toggler {    padding: 0.35rem 0.4rem !important;  }  .an-navbar .an-icon-btn {    padding: 0.35rem !important;  }  /* Aufgeklapptes Menue: volle Breite, unter der Kopfzeile */
  .an-navbar .navbar-collapse {    flex-basis: 100%;    max-width: 100%;    overflow-wrap: break-word;  }  /* Menuepunkte: linksbuendig untereinander (Standard-Mobile) */
  .an-navbar .navbar-nav {    margin: 0.5rem 0 0 !important;  }  .an-navbar .navbar-nav .nav-link {    padding: 0.65rem 0.25rem !important;  }  /* Suchfeld (Desktop-Formular versteckt d-md-none-Formular aktiv): volle Breite */
  .an-navbar .an-search-input {    width: 100% !important;  }  .an-navbar .an-search-form {    width: 100%;  }  /* Dropdowns (Archiv/Shop/Login): NUR im aufgeklappten Zustand (.show,
     getoggelt via vma-vanilla.js) statisch inline und volle Breite -
     Base-Regel .dropdown-menu{display:none} bleibt fuer zugeklappte aktiv */
  .an-navbar .dropdown-menu.an-dropdown.show {    position: static;    width: 100%;    max-width: 100%;    min-width: 0 !important;    margin: 0 !important;    padding: 0 0 0.25rem 0 !important;    background: transparent !important;    border: 0 !important;    box-shadow: none !important;    backdrop-filter: none;    -webkit-backdrop-filter: none;    animation: none;  }  .an-navbar .dropdown-menu.an-dropdown .dropdown-item {    padding: 0.55rem 0 0.55rem 1.25rem;    white-space: normal;    word-break: break-word;  }  /* Login-Formular im Dropdown: volle Breite, keine Fixbreite 300px */
  .an-login-dropdown {    min-width: 0 !important;    padding: 0 1rem 0.75rem 1rem !important;  }  /* Trennlinien zwischen Menuepunkten fuer Orientierung */
  .an-navbar .navbar-collapse .nav-item:not(:last-child) {    border-bottom: 1px solid var(--vst-border);  }}/* Sehr schmale Screens (<360px): Brand nochmals kleiner als Fallback */
@media (max-width: 359.98px) {  .an-navbar .navbar-brand.an-brand {    font-size: 0.95rem !important;  }}/* Footer-Linkleiste: auf Smartphones untereinander statt abgeschnitten */
@media (max-width: 767.98px) {  .an-footer-nav {    flex-wrap: wrap;    justify-content: center;    gap: 0.35rem 0.75rem;  }  .an-footer-nav .an-footer-link {    white-space: normal;    word-break: break-word;  }}

/* ============================================================
   FAQ SECTION STYLES
   ============================================================ */
.faq-container {
  max-width: 100%;
}

.faq-search-container {
  margin-bottom: 1.5rem;
}

.faq-search-input {
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  border-radius: 0.375rem;
  border: 2px solid var(--vst-border);
  transition: border-color 0.3s ease;
}

.faq-search-input:focus {
  border-color: var(--vst-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--vst-accent-rgb), 0.25);
}

.faq-main-section {
  margin-bottom: 1.5rem;
}

.faq-toggle {
  color: var(--vst-text-primary);
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
}

.faq-toggle:hover {
  color: var(--vst-accent);
}

.faq-toggle::after {
  content: '\25B6';
  font-size: 0.8em;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.faq-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.faq-subsections,
.faq-items,
.faq-text {
  transition: all 0.3s ease;
}

.faq-subsection-list,
.faq-subsection-list .faq-subsections,
.faq-subsection-list .faq-items,
.faq-item .faq-text {
  border-left: 2px solid var(--vst-border);
  padding-left: 1rem;
}

.faq-subsection,
.faq-item-entry {
  margin-bottom: 0.5rem;
}

.faq-item-entry h4 {
  margin: 0.5rem 0;
}

.faq-text .pt-2.pb-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgba(var(--vst-bg-light-rgb), 0.5);
  border-radius: 0.25rem;
}

.cursor-pointer {
  cursor: pointer;
}

.faq-reset-btn {
  height: calc(1.5em + 1.5rem + 2px);
}

.faq-search-container .d-flex {
  align-items: center;
}

.faq-highlight {
  background-color: var(--vst-accent);
  color: var(--vst-bg-light);
  padding: 0 0.2rem;
  border-radius: 0.2rem;
  font-weight: bold;
}

.faq-answer-text mark.faq-highlight,
.faq-title-text mark.faq-highlight {
  background-color: var(--vst-accent);
  color: white;
}