Upload folder via GUI - assets

assets/css/forum-style.css

@@ -5556,4 +5556,129 @@ select.wbf-cf-input option { background: var(--c-surface2); color: var(--c-text)
     font-size: .8rem !important;
     line-height: 1 !important;
     flex-shrink: 0 !important;
-}
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   ABO-TAB — Abonnement-Verwaltung
+   ═══════════════════════════════════════════════════════════════ */
+
+.wbf-abo-card {
+    border: 1px solid var(--c-border);
+    border-radius: 10px;
+    margin-bottom: 1.2em;
+    overflow: hidden;
+    transition: box-shadow .2s;
+}
+.wbf-abo-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }
+
+.wbf-abo-card--active  { border-left: 4px solid var(--c-success); }
+.wbf-abo-card--cancelled { border-left: 4px solid var(--c-danger); opacity: .85; }
+.wbf-abo-card--info    { border-left: 4px solid var(--c-primary); }
+
+.wbf-abo-card__head {
+    display: flex;
+    align-items: center;
+    gap: .8em;
+    padding: .9em 1.1em;
+    background: var(--c-bg-alt);
+    border-bottom: 1px solid var(--c-border);
+}
+.wbf-abo-icon { font-size: 1.5em; line-height: 1; }
+.wbf-abo-card__title { flex: 1; display: flex; flex-direction: column; gap: .2em; }
+.wbf-abo-card__title strong { font-size: 1em; }
+.wbf-abo-card__price { font-size: .85em; color: var(--c-muted); white-space: nowrap; }
+
+.wbf-abo-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .3em;
+    font-size: .75em;
+    padding: .2em .6em;
+    border-radius: 20px;
+    font-weight: 600;
+    width: fit-content;
+}
+.wbf-abo-badge--active    { background: rgba(34,197,94,.15); color: var(--c-success); }
+.wbf-abo-badge--cancelled { background: rgba(239,68,68,.12); color: var(--c-danger); }
+.wbf-abo-badge--info      { background: rgba(99,102,241,.12); color: var(--c-primary); }
+
+.wbf-abo-card__details {
+    padding: .8em 1.1em;
+    display: flex;
+    flex-direction: column;
+    gap: .4em;
+}
+.wbf-abo-detail-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: .88em;
+    gap: 1em;
+}
+.wbf-abo-detail-row span { color: var(--c-muted); }
+.wbf-abo-detail-row strong { text-align: right; }
+
+.wbf-abo-progress {
+    height: 6px;
+    background: var(--c-border);
+    border-radius: 3px;
+    margin-top: .4em;
+    overflow: hidden;
+}
+.wbf-abo-progress__bar {
+    height: 100%;
+    border-radius: 3px;
+    transition: width .4s ease;
+}
+.wbf-abo-progress__label {
+    display: flex;
+    justify-content: space-between;
+    font-size: .75em;
+    color: var(--c-muted);
+    margin-top: .2em;
+}
+
+.wbf-abo-card__footer {
+    padding: .7em 1.1em;
+    background: var(--c-bg-alt);
+    border-top: 1px solid var(--c-border);
+    display: flex;
+    align-items: center;
+    gap: .8em;
+    flex-wrap: wrap;
+}
+.wbf-abo-cancel-hint { font-size: .8em; color: var(--c-muted); }
+
+/* Modal */
+.wbf-modal {
+    position: fixed; inset: 0; z-index: 9999;
+    display: flex; align-items: center; justify-content: center;
+}
+.wbf-modal__backdrop {
+    position: absolute; inset: 0;
+    background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
+}
+.wbf-modal__box {
+    position: relative; z-index: 1;
+    background: var(--c-bg);
+    border: 1px solid var(--c-border);
+    border-radius: 12px;
+    width: min(420px, 90vw);
+    box-shadow: 0 8px 32px rgba(0,0,0,.3);
+    overflow: hidden;
+}
+.wbf-modal__header {
+    padding: .9em 1.2em;
+    background: var(--c-bg-alt);
+    border-bottom: 1px solid var(--c-border);
+    font-weight: 700;
+    display: flex; align-items: center; gap: .5em;
+    color: var(--c-danger);
+}
+.wbf-modal__body { padding: 1.1em 1.2em; line-height: 1.6; }
+.wbf-modal__footer {
+    padding: .8em 1.2em;
+    background: var(--c-bg-alt);
+    border-top: 1px solid var(--c-border);
+    display: flex; justify-content: flex-end; gap: .6em;
+}