/* ============================================================
   xNetwork — shared-ui.css
   Design-System Komponenten.
   Jede Komponente hat eine Base-Klasse + optionale Varianten.

   Reihenfolge:
   BUTTONS → BTN-GROUP → CARDS → PANELS → STAT-BLOCK → TOASTS →
   MODAL → TABLE → PROGRESS → COPY-FIELD → FILE-CARD → TAGS →
   TABS → ALERT → STAR-RATING → LINK-CARD → NAV-CARD → ACCORDION →
   AVATAR → STEPS → SEARCH-BAR → REVIEW-CARD → DROPDOWN → PAGINATION
   ============================================================ */


/* ============================================================
   BUTTONS
   ============================================================ */

/* BEGIN BUTTONS */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    height:          40px;
    padding:         0 var(--space-5);
    border-radius:   var(--radius);
    font-size:       var(--text-ui);
    font-weight:     500;
    font-family:     var(--font-sans);
    cursor:          pointer;
    border:          1px solid transparent;
    transition:      background var(--transition-fast),
                     color      var(--transition-fast),
                     border-color var(--transition-fast),
                     box-shadow var(--transition-fast),
                     opacity    var(--transition-fast);
    white-space:     nowrap;
    user-select:     none;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
    pointer-events: none;
}

.btn-primary {
    background:   var(--accent);
    color:        #fff;
    border-color: var(--accent);
}

.btn-primary:hover {
    background:   #d4566a;
    border-color: #d4566a;
    box-shadow:   var(--shadow-accent);
}

.btn-secondary {
    background:   var(--glass);
    color:        var(--text-secondary);
    border-color: var(--border);
}

.btn-secondary:hover {
    background:   var(--glass-hover);
    color:        var(--text-primary);
    border-color: var(--border-hover);
}

.btn-danger {
    background:   var(--color-danger-soft);
    color:        var(--color-danger);
    border-color: rgba(232, 85, 85, 0.25);
}

.btn-danger:hover {
    background:   rgba(232, 85, 85, 0.28);
    border-color: rgba(232, 85, 85, 0.45);
}

.btn-ghost {
    background:   transparent;
    color:        var(--text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--glass);
    color:      var(--text-primary);
}

.btn-sm {
    height:    30px;
    padding:   0 var(--space-3);
    font-size: var(--text-sm);
}

.btn-lg {
    height:    42px;
    padding:   0 var(--space-8);
    font-size: var(--text-md);
}

.btn-icon {
    padding: 0;
    width:   34px;
    height:  34px;
}

.btn-icon.btn-sm {
    width:  30px;
    height: 30px;
}
/* END BUTTONS */


/* ============================================================
   BTN-GROUP
   Buttons darin teilen Breite automatisch auf
   ============================================================ */

/* BEGIN BTN-GROUP */
.btn-group {
    display: flex;
    gap:     var(--space-3);
}

.btn-group .btn {
    flex: 1;
}

@media (max-width: 640px) {
    .btn-group {
        flex-direction: column;
    }
}
/* END BTN-GROUP */


/* ============================================================
   CARDS
   ============================================================ */

/* BEGIN CARDS */
.card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    padding:       var(--space-6);
    transition:    border-color var(--transition-fast),
                   box-shadow   var(--transition-fast);
}

.card-hover:hover {
    border-color: var(--border-hover);
    box-shadow:   var(--shadow);
}

.card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    margin-bottom:   var(--space-5);
    padding-bottom:  var(--space-5);
    border-bottom:   1px solid var(--border);
}

.card-title {
    font-size:      var(--text-md);
    font-weight:    600;
    letter-spacing: -0.01em;
}

.card-subtitle {
    font-size:  var(--text-sm);
    color:      var(--text-muted);
    margin-top: var(--space-1);
}

.card-body {
    font-size: var(--text-sm);
    color:     var(--text-secondary);
    line-height: 1.7;
}

.card-footer {
    margin-top:    var(--space-5);
    padding-top:   var(--space-5);
    border-top:    1px solid var(--border);
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    flex-wrap:     wrap;
}
/* END CARDS */


/* ============================================================
   PANELS
   ============================================================ */

/* BEGIN PANELS */
.panel {
    border-radius: var(--radius-md);
    padding:       var(--space-6);
}

.panel-glass {
    background:  var(--glass);
    border:      1px solid var(--border);
    backdrop-filter: blur(8px);
}

.panel-solid {
    background: var(--surface);
    border:     1px solid var(--border);
    box-shadow: var(--shadow), 0 0 60px rgba(0, 0, 0, 0.30);
}

.panel-outline {
    background:   transparent;
    border:       1px solid var(--border);
}

.panel-accent {
    background:   var(--accent-subtle);
    border:       1px solid rgba(232, 99, 122, 0.20);
}

.panel-raised {
    background:    rgba(20, 14, 35, 0.95);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
}

.panel-modal {
    background: var(--surface-modal);
    border:     1px solid var(--border);
}

.panel-header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom:  1px solid var(--border);
}

.panel-title {
    font-size:   var(--text-md);
    font-weight: 600;
    color:       var(--text-primary);
}

.panel-subtitle {
    font-size:  var(--text-sm);
    color:      var(--text-muted);
    margin-top: var(--space-1);
}
/* END PANELS */


/* ============================================================
   STAT-BLOCK
   Numerische Kennzahlen (z.B. Online-Spieler, Uptime)
   ============================================================ */

/* BEGIN STAT-BLOCK */
.stat-block {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            var(--space-1);
}

.stat-label {
    font-size:      var(--text-xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--text-subtle);
}

.stat-value {
    font-size:      var(--text-xl);
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--text-primary);
    line-height:    1.1;
}

.stat-value-accent {
    color: var(--accent);
}

.stat-sub {
    font-size: var(--text-xs);
    color:     var(--text-muted);
}
/* END STAT-BLOCK */




/* ============================================================
   TOASTS
   ============================================================ */

/* BEGIN TOASTS */
.toast-container {
    position:       fixed;
    bottom:         var(--space-6);
    right:          var(--space-6);
    z-index:        var(--z-toast);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    pointer-events: none;
}

.toast {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       var(--space-3) var(--space-5);
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    min-width:     280px;
    max-width:     380px;
    pointer-events: all;
    animation:     toastIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition:    background   var(--transition-fast),
                   border-color var(--transition-fast);
}

.toast.is-leaving {
    animation: toastOut 0.22s ease forwards;
}

.toast-success { border-left: 3px solid var(--color-success); }
.toast-danger  { border-left: 3px solid var(--color-danger);  }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-info    { border-left: 3px solid var(--color-info);    }

.toast-icon {
    font-size:   1rem;
    flex-shrink: 0;
    margin-top:  2px;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--text-primary);
    margin-bottom: 2px;
}

.toast-text {
    font-size: var(--text-xs);
    color:     var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .toast-container {
        bottom: var(--space-4);
        right:  var(--space-4);
        left:   var(--space-4);
    }

    .toast {
        min-width: unset;
        max-width: 100%;
    }
}
/* END TOASTS */


/* ============================================================
   MODAL
   ============================================================ */

/* BEGIN MODAL */
.modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(5px);
    z-index:         var(--z-modal);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--space-6);
    animation:       fadeIn 0.18s ease both;
}

.modal-overlay.is-hidden {
    display: none;
}

.modal {
    background:    var(--surface-modal);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    width:         100%;
    max-width:     520px;
    box-shadow:    var(--shadow-xl);
    animation:     scaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    overflow:      hidden;
}

.modal::before {
    content:    '';
    display:    block;
    height:     3px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(232, 99, 122, 0.20) 60%, transparent 100%);
}

.modal-sm { max-width: 380px; }
.modal-lg { max-width: 700px; }

.modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding:         var(--space-5) var(--space-6);
    border-bottom:   1px solid var(--border);
    position:        relative;
    overflow:        hidden;
}

.modal-header::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(100deg, rgba(232, 99, 122, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.modal-title {
    font-size:   var(--text-md);
    font-weight: 600;
    color:       var(--text-primary);
}

.modal-body {
    padding: var(--space-6);
}

.modal-footer {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             var(--space-3);
    padding:         var(--space-4) var(--space-6);
    border-top:      1px solid var(--border);
}
/* END MODAL */


/* ============================================================
   TABLE
   ============================================================ */

/* BEGIN TABLE */
.table-wrapper {
    overflow-x:    auto;
    background:    var(--surface);
    border-radius: var(--radius-md);
    border:        1px solid var(--border);
}

.table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--text-sm);
}

.table thead {
    background: var(--glass);
}

.table th {
    padding:        var(--space-3) var(--space-5);
    text-align:     left;
    font-size:      var(--text-2xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--text-subtle);
    border-bottom:  1px solid var(--border);
    white-space:    nowrap;
}

.table td {
    padding:        var(--space-4) var(--space-5);
    color:          var(--text-secondary);
    border-bottom:  1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background: var(--glass);
}

.table-col-right  { text-align: right;  }
.table-col-center { text-align: center; }
/* END TABLE */


/* ============================================================
   PROGRESS
   ============================================================ */

/* BEGIN PROGRESS */
.progress {
    width:         100%;
    height:        8px;
    background:    var(--glass);
    border:        1px solid var(--border);
    border-radius: var(--radius-full);
    overflow:      hidden;
}

.progress-bar {
    height:        100%;
    background:    var(--accent);
    border-radius: var(--radius-full);
    transition:    width var(--transition-slow);
    min-width:     4px;
}

.progress-success .progress-bar { background: var(--color-success); }
.progress-warning .progress-bar { background: var(--color-warning); }
.progress-danger  .progress-bar { background: var(--color-danger);  }
.progress-info    .progress-bar { background: var(--color-info);    }

.progress-label {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin-bottom:   var(--space-2);
}

.progress-label-text {
    font-size: var(--text-xs);
    color:     var(--text-muted);
}

.progress-label-value {
    font-size:   var(--text-xs);
    font-weight: 600;
    color:       var(--text-primary);
}
/* END PROGRESS */


/* ============================================================
   COPY-FIELD
   ============================================================ */

/* BEGIN COPY-FIELD */
.copy-field {
    display:       flex;
    align-items:   center;
    background:    var(--glass);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    border-color var(--transition-fast);
}

.copy-field:focus-within {
    border-color: var(--border-focus);
}

.copy-field-text {
    flex:          1;
    padding:       var(--space-2) var(--space-4);
    font-family:   var(--font-mono);
    font-size:     var(--text-sm);
    color:         var(--text-secondary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    min-width:     0;
    user-select:   all;
    background:    transparent;
    border:        none;
    outline:       none;
    cursor:        text;
}

.copy-field-btn {
    flex-shrink:  0;
    padding:      var(--space-2) var(--space-4);
    background:   transparent;
    border:       none;
    border-left:  1px solid var(--border);
    color:        var(--text-muted);
    font-size:    var(--text-xs);
    font-family:  var(--font-sans);
    font-weight:  500;
    cursor:       pointer;
    white-space:  nowrap;
    height:       100%;
    display:      flex;
    align-items:  center;
    transition:   background var(--transition-fast),
                  color      var(--transition-fast);
}

.copy-field-btn:hover {
    background: var(--glass-hover);
    color:      var(--text-primary);
}

.copy-field-btn.is-copied {
    color: var(--color-success);
}

.copy-field-btn-primary {
    background:   var(--accent);
    color:        #fff;
    border-color: var(--accent);
}

.copy-field-btn-primary:hover {
    background: #d4566a;
    color:      #fff;
}

.copy-field-btn-primary.is-copied {
    background:   var(--color-success-soft);
    border-color: rgba(76, 175, 130, 0.30);
    color:        var(--color-success);
}
/* END COPY-FIELD */


/* ============================================================
   FILE-CARD
   ============================================================ */

/* BEGIN FILE-CARD */
.file-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    padding:       var(--space-4) var(--space-5);
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    transition:    border-color var(--transition-fast),
                   box-shadow   var(--transition-fast);
}

.file-card:hover {
    border-color: var(--border-hover);
    box-shadow:   var(--shadow);
}

.file-card-icon {
    width:           44px;
    height:          44px;
    border-radius:   var(--radius);
    background:      var(--glass);
    border:          1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       1.3rem;
}

.file-card-info {
    flex:      1;
    min-width: 0;
}

.file-card-name {
    font-size:     var(--text-sm);
    font-weight:   600;
    color:         var(--text-primary);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.file-card-meta {
    font-size:  var(--text-xs);
    color:      var(--text-muted);
    margin-top: var(--space-1);
    display:    flex;
    gap:        var(--space-3);
    flex-wrap:  wrap;
}

.file-card-meta-sep {
    color: var(--text-subtle);
}

.file-card-actions {
    flex-shrink: 0;
    display:     flex;
    gap:         var(--space-2);
    align-items: center;
}

.file-card-glass {
    background:      var(--glass);
    backdrop-filter: blur(8px);
}

.file-card-glass:hover { }
/* END FILE-CARD */


/* ============================================================
   TAGS
   ============================================================ */

/* BEGIN TAGS */
.tag {
    display:        inline-flex;
    align-items:    center;
    align-self:     flex-start;
    gap:            var(--space-1);
    height:         20px;
    padding:        0 var(--space-3);
    background:     var(--glass);
    border:         1px solid var(--border);
    border-radius:  var(--radius-full);
    font-size:      var(--text-2xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--text-muted);
    white-space:    nowrap;
    cursor:         default;
    width:          fit-content;
    transition:     background   var(--transition-fast),
                    border-color var(--transition-fast),
                    color        var(--transition-fast);
}

.tag-filter {
    cursor:      pointer;
    user-select: none;
}

.tag-filter:hover {
    background:   var(--glass-hover);
    border-color: var(--border-hover);
    color:        var(--text-secondary);
}

.tag-filter.is-active {
    background:   var(--accent-soft);
    border-color: rgba(232, 99, 122, 0.35);
    color:        var(--accent);
}

.tag-accent {
    background:   var(--accent-subtle);
    border-color: rgba(232, 99, 122, 0.35);
    color:        var(--accent);
}

.tag-remove {
    appearance:  none;
    background:  none;
    border:      none;
    padding:     0;
    margin:      0;
    cursor:      pointer;
    color:       var(--text-muted);
    font-size:   0.75em;
    line-height: 1;
    width:       1em;
    height:      1em;
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:  color var(--transition-fast);
}

.tag-remove:hover {
    color: var(--color-danger);
}

.tags-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}
/* END TAGS */


/* ============================================================
   TABS
   ============================================================ */

/* BEGIN TABS */
.tab-bar {
    display:       flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
    overflow-x:    auto;
    scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar {
    display: none;
}

.tab-item {
    padding:        var(--space-3) var(--space-5);
    font-size:      var(--text-sm);
    font-weight:    500;
    color:          var(--text-muted);
    cursor:         pointer;
    border-bottom:  3px solid transparent;
    margin-bottom:  -1px;
    transition:     color        var(--transition-fast),
                    border-color var(--transition-fast);
    user-select:    none;
    white-space:    nowrap;
    flex-shrink:    0;
}

.tab-item:hover {
    color: var(--text-secondary);
}

.tab-item.is-active {
    color:        var(--text-primary);
    border-color: var(--accent);
}

.tab-pane {
    display: none;
}

.tab-pane.is-active {
    display:   block;
    animation: fadeIn 0.18s ease both;
}

/* Pill-Variante — für Kategorie-Navigation (z.B. Home-Seite) */
.tab-bar-pills {
    border-bottom: none;
    gap:           var(--space-2);
    margin-bottom: 0;
    flex-wrap:     wrap;
    overflow:      visible;
}

.tab-bar-pills .tab-item {
    border:             1px solid var(--border);
    border-bottom:      1px solid var(--border);
    border-bottom-width: 1px;
    border-radius:      var(--radius-full);
    background:         transparent;
    margin-bottom:      0;
    padding:            7px 14px;
    color:              var(--text-muted);
    display:            flex;
    align-items:        center;
    gap:                var(--space-2);
}

.tab-bar-pills .tab-item:hover {
    background:   var(--glass);
    border-color: var(--border);
    color:        var(--text-secondary);
}

.tab-bar-pills .tab-item.is-active {
    background:   var(--accent-soft);
    border-color: rgba(232, 99, 122, 0.4);
    color:        var(--accent);
}

.tab-dot {
    width:         6px;
    height:        6px;
    border-radius: var(--radius-full);
    background:    currentColor;
    opacity:       0.6;
    flex-shrink:   0;
}

.tab-count {
    font-family: var(--font-mono);
    font-size:   var(--text-2xs);
    opacity:     0.7;
}
/* END TABS */


/* ============================================================
   ALERT
   ============================================================ */

/* BEGIN ALERT */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border:        1px solid;
}

.alert-success {
    background:   var(--color-success-soft);
    border-color: rgba(76, 175, 130, 0.28);
}

.alert-warning {
    background:   var(--color-warning-soft);
    border-color: rgba(232, 162, 58, 0.28);
}

.alert-danger {
    background:   var(--color-danger-soft);
    border-color: rgba(232, 85, 85, 0.28);
}

.alert-info {
    background:   var(--color-info-soft);
    border-color: rgba(91, 155, 213, 0.28);
}

.alert-accent {
    background:   var(--accent-soft);
    border-color: rgba(232, 99, 122, 0.20);
}

.alert-icon {
    flex-shrink: 0;
    font-size:   1.05rem;
    margin-top:  1px;
}

.alert-body {
    flex:      1;
    min-width: 0;
}

.alert-title {
    font-size:     var(--text-sm);
    font-weight:   600;
    color:         var(--text-primary);
    margin-bottom: 3px;
}

.alert-text {
    font-size:   var(--text-sm);
    color:       var(--text-secondary);
    line-height: 1.65;
}
/* END ALERT */


/* ============================================================
   STAR-RATING
   ============================================================ */

/* BEGIN STAR-RATING */
.star-rating {
    display: inline-flex;
    gap:     var(--space-1);
}

.star {
    font-size:   1.15rem;
    color:       var(--text-subtle);
    line-height: 1;
    cursor:      default;
}

.star-filled {
    color: var(--color-warning);
}

.star-rating-interactive .star {
    cursor:     pointer;
    transition: color     var(--transition-fast),
                transform var(--transition-fast);
}

.star-rating-interactive .star:hover {
    transform: scale(1.2);
}

.rating-summary {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.rating-value {
    font-size:   var(--text-xl);
    font-weight: 700;
    color:       var(--text-primary);
    line-height: 1;
}

.rating-count {
    font-size: var(--text-xs);
    color:     var(--text-muted);
}
/* END STAR-RATING */


/* ============================================================
   LINK-CARD
   ============================================================ */

/* BEGIN LINK-CARD */
.link-card {
    display:         flex;
    align-items:     center;
    gap:             var(--space-4);
    padding:         var(--space-4) var(--space-5);
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius-md);
    text-decoration: none;
    cursor:          pointer;
    transition:      background   var(--transition-fast),
                     border-color var(--transition-fast),
                     transform    var(--transition-fast),
                     box-shadow   var(--transition-fast);
}

.link-card:hover {
    border-color: var(--border-hover);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow);
}

.link-card-icon {
    width:           42px;
    height:          42px;
    border-radius:   var(--radius);
    background:      var(--accent-subtle);
    border:          1px solid rgba(232, 99, 122, 0.15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       1.2rem;
}

.link-card-text {
    flex:      1;
    min-width: 0;
}

.link-card-label {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--text-primary);
}

.link-card-sub {
    font-size:  var(--text-xs);
    color:      var(--text-muted);
    margin-top: 2px;
}

.link-card-arrow {
    color:       var(--text-subtle);
    flex-shrink: 0;
    font-size:   0.85rem;
    transition:  color     var(--transition-fast),
                 transform var(--transition-fast);
}

.link-card:hover .link-card-arrow {
    color:     var(--text-muted);
    transform: translateX(2px);
}

.link-card-glass {
    background:      var(--glass);
    backdrop-filter: blur(8px);
}

.link-card-glass:hover { }
/* END LINK-CARD */


/* ============================================================
   NAV-CARD
   Vertikale Service-/Navigations-Card (Icon oben, Titel, Beschreibung,
   Footer mit Badge oder Live-Status + Pfeil).
   Primär für Hauptseite und Service-Übersichten.
   ============================================================ */

/* BEGIN NAV-CARD */
.nav-card {
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-3);
    padding:         var(--space-5);
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius-md);
    box-shadow:      var(--shadow), 0 0 60px rgba(0, 0, 0, 0.30);
    text-decoration: none;
    color:           inherit;
    transition:
        background   var(--transition),
        border-color var(--transition),
        transform    var(--transition);
}

.nav-card:hover {
    border-color: var(--accent);
    transform:    translateY(-2px);
}

.nav-card-live { }

.nav-card-glass {
    background: var(--glass);
}

.nav-card-glass:hover { }

.nav-card-icon { font-size: 1.5rem; }

.nav-card-body { flex: 1; }

.nav-card-title-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-2);
}

.nav-card-title {
    font-size:   var(--text-md);
    font-weight: 600;
    color:       var(--text-primary);
}

.nav-card-live-status {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-size:   var(--text-sm);
    flex-shrink: 0;
}

.nav-card-live-status.is-online  { color: var(--color-success); }
.nav-card-live-status.is-offline { color: var(--color-danger); }

.nav-card-sub {
    font-size:   var(--text-sm);
    color:       var(--text-muted);
    margin-top:  var(--space-1);
    line-height: 1.4;
}
/* END NAV-CARD */


/* ============================================================
   ACCORDION
   ============================================================ */

/* BEGIN ACCORDION */
.accordion {
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    overflow:      hidden;
}

.accordion-solid {
    background: var(--surface);
}

.accordion-solid .accordion-trigger:hover {
    background: var(--glass-hover);
}

.accordion-item {
    border-bottom: 1px solid var(--border);
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         var(--space-4) var(--space-5);
    background:      transparent;
    border:          none;
    color:           var(--text-primary);
    font-size:       var(--text-sm);
    font-weight:     500;
    font-family:     var(--font-sans);
    cursor:          pointer;
    text-align:      left;
    gap:             var(--space-3);
    transition:      background var(--transition-fast),
                     color      var(--transition-fast);
}

.accordion-trigger:hover {
    background: var(--glass);
}

.accordion-trigger.is-open {
    color: var(--accent);
}

.accordion-chevron {
    flex-shrink: 0;
    font-size:   0.7rem;
    color:       var(--text-muted);
    transition:  transform var(--transition),
                 color     var(--transition-fast);
}

.accordion-trigger.is-open .accordion-chevron {
    transform: rotate(180deg);
    color:     var(--accent);
}

.accordion-content {
    overflow:   hidden;
    max-height: 0;
    transition: max-height var(--transition-slow);
}

.accordion-content.is-open {
    max-height: 600px;
    animation:  fadeIn 0.22s ease both;
}

.accordion-body {
    padding:     0 var(--space-5) var(--space-5);
    font-size:   var(--text-sm);
    color:       var(--text-secondary);
    line-height: 1.7;
}
/* END ACCORDION */


/* ============================================================
   AVATAR
   ============================================================ */

/* BEGIN AVATAR */
.avatar {
    width:           40px;
    height:          40px;
    border-radius:   var(--radius-full);
    background:      var(--glass);
    border:          1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--text-sm);
    font-weight:     600;
    color:           var(--text-muted);
    flex-shrink:     0;
    overflow:        hidden;
    object-fit:      cover;
    user-select:     none;
}

.avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.avatar-xs { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar-sm { width: 32px; height: 32px; font-size: var(--text-xs);  }
.avatar-lg { width: 56px; height: 56px; font-size: var(--text-lg);  }
.avatar-xl { width: 72px; height: 72px; font-size: var(--text-xl);  }

.avatar-group {
    display:     flex;
    align-items: center;
}

.avatar-group .avatar {
    margin-left: -10px;
    border:      2px solid var(--surface);
    transition:  transform var(--transition-fast);
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

.avatar-group .avatar:hover {
    transform: translateY(-2px);
    z-index:   1;
}

.avatar-group-count {
    margin-left: -10px;
    background:  var(--glass);
    border:      2px solid var(--surface);
    font-size:   var(--text-xs);
    color:       var(--text-muted);
}
/* END AVATAR */


/* ============================================================
   STEPS
   ============================================================ */

/* BEGIN STEPS */
.steps {
    display:     flex;
    align-items: flex-start;
}

.step {
    flex:           1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    position:       relative;
}

.step + .step::before {
    content:    '';
    position:   absolute;
    top:        14px;
    right:      50%;
    left:       -50%;
    height:     2px;
    background: var(--border);
    z-index:    0;
    transition: background var(--transition);
}

.step.is-completed + .step::before {
    background: var(--color-success);
}

.step-dot {
    width:           30px;
    height:          30px;
    border-radius:   var(--radius-full);
    background:      var(--glass);
    border:          2px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--text-xs);
    font-weight:     600;
    color:           var(--text-muted);
    z-index:         1;
    position:        relative;
    transition:      background   var(--transition),
                     border-color var(--transition),
                     color        var(--transition);
}

.step.is-active .step-dot {
    border-color: var(--accent);
    color:        var(--accent);
    background:   var(--accent-subtle);
    box-shadow:   0 0 0 4px var(--accent-soft);
}

.step.is-completed .step-dot {
    border-color: var(--color-success);
    background:   var(--color-success-soft);
    color:        var(--color-success);
}

.step-label {
    font-size:   var(--text-xs);
    color:       var(--text-muted);
    margin-top:  var(--space-2);
    text-align:  center;
    line-height: 1.3;
}

.step.is-active .step-label {
    color:       var(--text-primary);
    font-weight: 500;
}

.step.is-completed .step-label {
    color: var(--color-success);
}
/* END STEPS */


/* ============================================================
   SEARCH-BAR
   ============================================================ */

/* BEGIN SEARCH-BAR */
.search-bar {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    height:        34px;
    background:    var(--glass);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       0 0 0 var(--space-4);
    overflow:      hidden;
    transition:    border-color var(--transition-fast),
                   background   var(--transition-fast);
}

.search-bar:focus-within {
    border-color: var(--border-focus);
    background:   var(--glass-hover);
}

.search-bar-icon {
    flex-shrink: 0;
    color:       var(--text-subtle);
    display:     flex;
    align-items: center;
    transition:  color var(--transition-fast);
}

.search-bar:focus-within .search-bar-icon {
    color: var(--text-muted);
}

.search-bar-input {
    flex:        1;
    background:  transparent;
    border:      none;
    outline:     none;
    font-size:   var(--text-ui);
    font-family: var(--font-sans);
    color:       var(--text-primary);
    padding:     0;
    min-width:   0;
}

.search-bar-input::placeholder {
    color: var(--text-subtle);
}

.search-bar-clear {
    appearance:      none;
    flex-shrink:     0;
    background:      none;
    border:          none;
    padding:         0;
    cursor:          pointer;
    color:           var(--text-muted);
    font-size:       0.7rem;
    width:           16px;
    height:          16px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    pointer-events:  none;
    transition:      color   var(--transition-fast),
                     opacity var(--transition-fast);
}

.search-bar-clear.is-visible {
    opacity:        1;
    pointer-events: all;
}

.search-bar-clear:hover {
    color: var(--color-danger);
}

.search-bar-btn {
    flex-shrink: 0;
    align-self:  stretch;
    background:  var(--accent);
    color:       #fff;
    border:      none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding:     0 var(--space-4);
    font-size:   var(--text-xs);
    font-weight: 500;
    font-family: var(--font-sans);
    cursor:      pointer;
    white-space: nowrap;
    display:     flex;
    align-items: center;
    transition:  background var(--transition-fast);
}

.search-bar-btn:hover {
    background: #d4566a;
}

/* END SEARCH-BAR */


/* ============================================================
   REVIEW-CARD
   ============================================================ */

/* BEGIN REVIEW-CARD */
.review-card {
    background:     var(--surface);
    border:         1px solid var(--border);
    border-radius:  var(--radius-md);
    padding:        var(--space-5);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    transition:     border-color var(--transition-fast),
                    box-shadow   var(--transition-fast);
}

.review-card:hover {
    border-color: var(--border-hover);
    box-shadow:   var(--shadow);
}

.review-card-header {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.review-card-author {
    flex:      1;
    min-width: 0;
}

.review-card-name {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--text-primary);
}

.review-card-date {
    font-size:  var(--text-xs);
    color:      var(--text-muted);
    margin-top: 2px;
}

.review-card-text {
    font-size:   var(--text-sm);
    color:       var(--text-secondary);
    line-height: 1.75;
    flex:        1;
    margin:      0;
}

.review-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding-top:     var(--space-3);
    border-top:      1px solid var(--border);
}

.review-card-glass {
    background:      var(--glass);
    backdrop-filter: blur(8px);
}

.review-card-glass:hover { }
/* END REVIEW-CARD */


/* ============================================================
   DROPDOWN
   ============================================================ */

/* BEGIN DROPDOWN */
.dropdown {
    position: relative;
    display:  inline-block;
}

.dropdown-menu {
    position:      absolute;
    top:           calc(100% + var(--space-2));
    left:          0;
    background:    rgba(18, 12, 32, 0.98);
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    min-width:     200px;
    z-index:       var(--z-dropdown);
    overflow:      hidden;
    animation:     fadeSlideDown 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dropdown-menu.is-hidden {
    display: none;
}

.dropdown-menu-right {
    left:  auto;
    right: 0;
}

.dropdown-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     var(--space-3) var(--space-4);
    font-size:   var(--text-sm);
    color:       var(--text-secondary);
    cursor:      pointer;
    user-select: none;
    border:      none;
    background:  none;
    width:       100%;
    text-align:  left;
    font-family: var(--font-sans);
    transition:  background var(--transition-fast),
                 color      var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--glass);
    color:      var(--text-primary);
}

.dropdown-item-danger {
    color: var(--color-danger);
}

.dropdown-item-danger:hover {
    background: var(--color-danger-soft);
    color:      var(--color-danger);
}

.dropdown-item-icon {
    width:       18px;
    flex-shrink: 0;
    text-align:  center;
    font-size:   0.85rem;
    opacity:     0.75;
}

.dropdown-divider {
    height:     1px;
    background: var(--border);
    margin:     var(--space-1) 0;
}

.dropdown-header {
    padding:        var(--space-2) var(--space-4) var(--space-1);
    font-size:      var(--text-2xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--text-subtle);
}
/* END DROPDOWN */


/* ============================================================
   PAGINATION
   ============================================================ */

/* BEGIN PAGINATION */
.pagination {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-wrap:   wrap;
}

.pagination-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       34px;
    height:          34px;
    padding:         0 var(--space-3);
    background:      var(--glass);
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    font-size:       var(--text-sm);
    font-family:     var(--font-sans);
    color:           var(--text-secondary);
    cursor:          pointer;
    user-select:     none;
    transition:      background   var(--transition-fast),
                     border-color var(--transition-fast),
                     color        var(--transition-fast);
    white-space:     nowrap;
}

.pagination-btn:hover {
    background:   var(--glass-hover);
    border-color: var(--border-hover);
    color:        var(--text-primary);
}

.pagination-btn.is-active {
    background:     var(--accent-soft);
    border-color:   rgba(232, 99, 122, 0.35);
    color:          var(--accent);
    font-weight:    600;
    pointer-events: none;
}

.pagination-btn:disabled {
    opacity:        0.35;
    cursor:         not-allowed;
    pointer-events: none;
}

.pagination-dots {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       34px;
    height:          34px;
    font-size:       var(--text-sm);
    color:           var(--text-subtle);
    user-select:     none;
    letter-spacing:  0.1em;
}
/* END PAGINATION */


/* ============================================================
   UI-DEMO-HELPERS
   Hilfsklassen fuer Design-System-Referenzseiten.
   ============================================================ */

/* BEGIN UI-SECTION */
.ui-section {
    margin-bottom: var(--space-16);
}

.ui-section:last-child {
    margin-bottom: var(--space-8);
}

.ui-section-title {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    font-weight:    600;
    color:          var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom:  var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom:  1px solid var(--border);
}
/* END UI-SECTION */

/* BEGIN UI-LABEL */
.ui-label {
    font-family:    var(--font-mono);
    font-size:      var(--text-2xs);
    color:          var(--text-subtle);
    letter-spacing: 0.04em;
    white-space:    nowrap;
}
/* END UI-LABEL */

/* BEGIN UI-ROW */
.ui-row {
    display:       flex;
    align-items:   flex-start;
    flex-wrap:     wrap;
    gap:           var(--space-5);
    margin-bottom: var(--space-5);
}

.ui-row:last-child {
    margin-bottom: 0;
}

.ui-row-center {
    align-items: center;
}
/* END UI-ROW */

/* BEGIN UI-ITEM */
.ui-item {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.ui-item-full {
    width: 100%;
}
/* END UI-ITEM */

/* BEGIN UI-TYPE-SCALE */
.ui-type-scale {
    display:        flex;
    flex-direction: column;
}

.ui-type-row {
    display:       flex;
    align-items:   baseline;
    gap:           var(--space-6);
    padding:       var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ui-type-row:last-child {
    border-bottom: none;
}

.ui-type-meta {
    font-family:    var(--font-mono);
    font-size:      var(--text-2xs);
    color:          var(--text-subtle);
    letter-spacing: 0.04em;
    min-width:      220px;
    flex-shrink:    0;
}
/* END UI-TYPE-SCALE */

/* BEGIN UI-BTN-GRID */
.ui-btn-grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   var(--space-3);
}

.ui-btn-grid .ui-item {
    align-items: stretch;
}

.ui-btn-grid .btn {
    width: 100%;
}

@media (max-width: 640px) {
    .ui-btn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* END UI-BTN-GRID */

/* BEGIN UI-BADGE-GRID */
.ui-badge-grid {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   var(--space-3);
}

.ui-badge-grid .ui-item {
    align-items: stretch;
}

.ui-badge-grid .badge {
    width:           100%;
    justify-content: center;
}

@media (max-width: 640px) {
    .ui-badge-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* END UI-BADGE-GRID */

/* BEGIN UI-TOAST-DEMO */
.ui-toast-demo {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.ui-toast-demo .toast {
    position:  static;
    animation: none;
    max-width: 420px;
}
/* END UI-TOAST-DEMO */

/* ============================================================
   DOC-CARD
   Dunkle Glasskarte mit pinkem Gradient-Top-Balken.
   Verwendung: Impressum, Datenschutz — formale Dokument-Seiten.
   ============================================================ */

/* BEGIN DOC-CARD */
.doc-card {
    background:    rgba(12, 8, 22, 0.90);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-xl);
}

.doc-card::before {
    content:    '';
    display:    block;
    height:     3px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(232, 99, 122, 0.20) 60%, transparent 100%);
}
/* END DOC-CARD */

/* BEGIN DOC-CARD-HEADER */
.doc-card-header {
    position: relative;
    overflow: hidden;
}

.doc-card-header::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(100deg, rgba(232, 99, 122, 0.06) 0%, transparent 50%);
    pointer-events: none;
}
/* END DOC-CARD-HEADER */


/* ============================================================
   DOC-SEAL
   Rundes Siegel-Widget mit x-Branding.
   Verwendung: Impressum, Datenschutz.
   Größe wird per Delta in der Page-CSS gesetzt.
   ============================================================ */

/* BEGIN DOC-SEAL */
.doc-seal {
    flex-shrink:     0;
    border-radius:   var(--radius-full);
    border:          2px dashed rgba(232, 99, 122, 0.30);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1px;
    opacity:         0.65;
    position:        relative;
    z-index:         1;
}

.doc-seal-x {
    font-weight: 700;
    color:       var(--accent);
    line-height: 1;
}

.doc-seal-text {
    font-family:    var(--font-mono);
    color:          var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align:     center;
    line-height:    1.4;
}
/* END DOC-SEAL */


/* BEGIN UI-PANEL-DEMO */
.ui-panel-demo {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   var(--space-3);
}

.ui-panel-demo .ui-item {
    width: 100%;
}

.ui-panel-demo .panel {
    width:           100%;
    height:          200px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

@media (max-width: 900px) {
    .ui-panel-demo {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .ui-panel-demo {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* END UI-PANEL-DEMO */

/* BEGIN UI-BOX */
.ui-box {
    background:    var(--glass);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       var(--space-4);
    text-align:    center;
    font-size:     var(--text-xs);
    color:         var(--text-subtle);
    font-family:   var(--font-mono);
}
/* END UI-BOX */

/* BEGIN UI-IMG-PLACEHOLDER */
.ui-img-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--text-xl);
}
/* END UI-IMG-PLACEHOLDER */