/* =========================================
   style.new-forms.css — CI 2026 rev.2
   Echte HTML-Klassen verwendet.
   Auth: Bootstrap .card + HTML-Patches empfohlen
   Scope: .theme-new
   ========================================= */

/* ════════════════════════════════════════
   AUTH-FORMS
   Strategie A (sofort): Bootstrap-Card stylen
   Strategie B (sauber): HTML-Patch + .auth-* Klassen
   Beide werden hier abgedeckt.
   ════════════════════════════════════════ */

/* ── Strategie A: Bootstrap-Card in Auth-Context ── */

/* Zentrierter Container */
.theme-new .container.py-5 > .row.justify-content-center .card {
  border: 1px solid var(--skw-border);
  border-radius: var(--skw-radius-xl) !important;
  box-shadow: var(--skw-shadow-md);
}

/* Card-Header (.retro-header) → neues Design */
.theme-new .retro-header {
  background: #0F0F23 !important;
  color: #fff !important;
  font-family: var(--skw-font);
  font-weight: 700;
  font-size: var(--skw-fs-body);
  letter-spacing: -0.01em;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--skw-radius-xl) var(--skw-radius-xl) 0 0 !important;
}

.theme-new .retro-header .bi {
  color: var(--skw-accent);
}

/* Card-Body in Auth */
.theme-new .container.py-5 > .row.justify-content-center .card .card-body {
  padding: 24px;
}

/* Form-Labels */
.theme-new .container.py-5 .form-label {
  font-family: var(--skw-font);
  font-size: var(--skw-fs-small);
  font-weight: 700;
  color: var(--skw-ink);
  margin-bottom: 5px;
}

/* Primary Button (Login/Register) */
.theme-new .container.py-5 .btn-primary.w-100 {
  font-weight: 700;
  font-size: var(--skw-fs-body);
  padding: 12px;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
  margin-top: 4px;
  border-radius: var(--skw-radius);
}

/* Links unter dem Formular */
.theme-new .container.py-5 .text-center a {
  color: var(--skw-accent);
  font-weight: 600;
}

/* ── Strategie B: .auth-* Klassen (nach HTML-Patch) ── */

.theme-new .auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--skw-bg);
}

.theme-new .auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--skw-surface);
  border: 1px solid var(--skw-border);
  border-radius: var(--skw-radius-xl);
  padding: 36px 32px;
  box-shadow: var(--skw-shadow-md);
}

.theme-new .auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}

.theme-new .auth-logo-mark {
  width: 48px;
  height: auto;
  color: var(--skw-accent);
  background: #0F0F23;
  padding: 12px;
  border-radius: 14px;
}

.theme-new .auth-logo-name {
  font-family: var(--skw-font);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--skw-ink);
}
.theme-new .auth-logo-name em { font-style: normal; color: var(--skw-accent); }
.theme-new .auth-sub { font-size: var(--skw-fs-small); color: var(--skw-text-muted); margin-top: 2px; }

.theme-new .auth-google-wrap { display: flex; justify-content: center; margin-bottom: 16px; }

.theme-new .auth-divider {
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
}
.theme-new .auth-divider .line { flex: 1; height: 1px; background: var(--skw-border); }
.theme-new .auth-divider .label {
  font-size: var(--skw-fs-label); font-weight: 700; color: var(--skw-text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.theme-new .auth-card .form-label {
  font-size: var(--skw-fs-small); font-weight: 700; color: var(--skw-ink); margin-bottom: 5px;
}

.theme-new .auth-card .form-control {
  border: 1.5px solid var(--skw-border-strong);
  border-radius: var(--skw-radius);
  background: var(--skw-surface);
  color: var(--skw-text);
  font-family: var(--skw-font);
  font-size: var(--skw-fs-body);
  padding: 10px 12px;
  transition: border-color var(--skw-dur-fast), box-shadow var(--skw-dur-fast);
}
.theme-new .auth-card .form-control:focus {
  border-color: var(--skw-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
  outline: none;
}

.theme-new .auth-card .btn-primary {
  width: 100%; padding: 12px; font-size: var(--skw-fs-body);
  font-weight: 700; box-shadow: 0 4px 16px rgba(99,102,241,0.3); margin-top: 4px;
}

.theme-new .auth-links { margin-top: 16px; text-align: center; }
.theme-new .auth-links a {
  font-size: var(--skw-fs-small); color: var(--skw-accent);
  text-decoration: none; font-weight: 600;
}
.theme-new .auth-links a:hover { text-decoration: underline; text-underline-offset: 2px; }

.theme-new .auth-error {
  background: rgba(244,63,94,0.10);
  border: 1px solid rgba(244,63,94,0.25);
  border-radius: var(--skw-radius);
  color: #9f1239;
  font-size: var(--skw-fs-small);
  padding: 10px 14px;
  margin-bottom: 14px;
}

/* ── Dark ── */
[data-bs-theme="dark"] .theme-new .auth-card { background: var(--skw-surface); border-color: var(--skw-border); }
[data-bs-theme="dark"] .theme-new .auth-card .form-control {
  background: var(--skw-surface-2); border-color: var(--skw-border); color: var(--skw-text);
}
[data-bs-theme="dark"] .theme-new .auth-error { color: #fda4af; }


/* ════════════════════════════════════════
   EINSTELLUNGEN (/user/einstellungen)
   Strategie: Bootstrap-Card + Klassen ergänzen
   ════════════════════════════════════════ */

/* Bootstrap .badge Anpassung für Abo-Status */
.theme-new .badge.bg-success {
  background: rgba(16,185,129,0.15) !important;
  color: var(--skw-success) !important;
  border: 1px solid rgba(16,185,129,0.3);
  font-family: var(--skw-font);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.theme-new .badge.bg-secondary {
  background: rgba(100,116,139,0.12) !important;
  color: var(--skw-text-muted) !important;
  border: 1px solid var(--skw-border);
  font-family: var(--skw-font);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Nach HTML-Patch: .settings-* Klassen */
.theme-new .settings-section {
  background: var(--skw-surface);
  border: 1px solid var(--skw-border);
  border-radius: var(--skw-radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--skw-shadow-xs);
}

.theme-new .settings-section-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--skw-border);
  background: var(--skw-surface-2);
}

.theme-new .settings-section-title {
  font-family: var(--skw-font);
  font-size: var(--skw-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--skw-text-muted);
  margin: 0;
}

.theme-new .settings-section-body { padding: 18px; }

.theme-new .settings-section.danger {
  border-color: rgba(244,63,94,0.25);
}
.theme-new .settings-section.danger .settings-section-header {
  background: rgba(244,63,94,0.06);
  border-bottom-color: rgba(244,63,94,0.2);
}
.theme-new .settings-section.danger .settings-section-title { color: var(--skw-danger); }
.theme-new .settings-section.danger .btn-danger {
  background: rgba(244,63,94,0.1);
  color: var(--skw-danger);
  border: 1.5px solid rgba(244,63,94,0.3);
  font-weight: 700;
}
.theme-new .settings-section.danger .btn-danger:hover {
  background: var(--skw-danger); color: #fff;
}

/* ── Dark ── */
[data-bs-theme="dark"] .theme-new .settings-section { background: var(--skw-surface); border-color: var(--skw-border); }
[data-bs-theme="dark"] .theme-new .settings-section-header { background: var(--skw-surface-2); }


/* ════════════════════════════════════════
   PREMIUM (/premium)
   Strategie A (Bootstrap-Cards) + B (.pricing-card nach Patch)
   ════════════════════════════════════════ */

/* Strategie A — Bootstrap .card in Premium-Kontext */
.theme-new .pricing-grid .card,
.theme-new .row.g-4 .col-md-6 .card {
  border: 1.5px solid var(--skw-border);
  border-radius: var(--skw-radius-xl) !important;
  transition: box-shadow var(--skw-dur);
}

/* Hervorgehobene Karte via .featured (nach HTML-Patch) */
.theme-new .card.featured,
.theme-new .pricing-card.featured {
  border-color: var(--skw-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14), var(--skw-shadow-md);
  position: relative;
}

.theme-new .card.featured::before,
.theme-new .pricing-card.featured::before {
  content: 'Empfohlen';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--skw-accent);
  color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Feature-Liste */
.theme-new .pricing-card .list-unstyled li,
.theme-new .card .list-unstyled li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--skw-fs-small); padding: 5px 0;
}

/* Payment-Buttons — Stripe & PayPal via .btn-stripe / .btn-paypal (nach Patch)
   Fallback: Bootstrap-Klassen */
.theme-new .btn-stripe,
.theme-new .btn.btn-primary[data-provider="stripe"] {
  background: #635BFF; color: #fff; border-color: #635BFF;
  font-weight: 700;
}
.theme-new .btn-stripe:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; }

.theme-new .btn-paypal,
.theme-new .btn.btn-warning[data-provider="paypal"] {
  background: #FFC439; color: #003087; border-color: #FFC439;
  font-weight: 700;
}
.theme-new .btn-paypal:hover { background: #f0b429; border-color: #f0b429; color: #003087; }

/* ── Dark ── */
[data-bs-theme="dark"] .theme-new .card.featured { border-color: var(--skw-accent) !important; }


/* ════════════════════════════════════════
   DOKUMENTATION (/sammlung/dokumentation)
   Echte Struktur: Bootstrap .table + .steuern-blur-row
   ════════════════════════════════════════ */

.theme-new table.table thead th {
  font-size: var(--skw-fs-label);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--skw-text-muted);
  padding: 9px 12px;
  border-bottom: 2px solid var(--skw-border);
  background: var(--skw-surface-2);
  white-space: nowrap;
}

.theme-new table.table tbody tr:hover { background: var(--skw-surface-2); }

.theme-new table.table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--skw-border);
  color: var(--skw-text);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.theme-new table.table .text-success { color: var(--skw-success) !important; }
.theme-new table.table .text-danger  { color: var(--skw-danger)  !important; }

/* Free-User Blur */
.theme-new .steuern-blur-row {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

/* Export-Button: Bootstrap .btn.btn-primary mit Download-Icon */
.theme-new .btn.btn-primary > .bi-download,
.theme-new .btn.btn-outline-primary > .bi-download {
  margin-right: 4px;
}

/* ── Dark ── */
[data-bs-theme="dark"] .theme-new table.table thead th { background: var(--skw-surface-2); }
[data-bs-theme="dark"] .theme-new table.table tbody td { border-color: var(--skw-border); }


/* ════════════════════════════════════════
   LEGAL (/legal)
   Strategie: Bootstrap .nav-tabs + Container
   Wrapper .legal-wrap optional (HTML-Patch)
   ════════════════════════════════════════ */

/* Wrapper nach HTML-Patch */
.theme-new .legal-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 80px;
}

/* Fallback ohne Patch: Container-Level */
.theme-new .container > h1.legal-title,
.theme-new .legal-wrap > h1 {
  font-family: var(--skw-font);
  font-size: var(--skw-fs-h1);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--skw-ink);
  margin-bottom: 20px;
}

/* Tab-Content Typografie */
.theme-new .tab-content .tab-pane {
  font-family: var(--skw-font);
  font-size: var(--skw-fs-body);
  line-height: 1.7;
  color: var(--skw-text-muted);
}

.theme-new .tab-content .tab-pane h2,
.theme-new .tab-content .tab-pane h3 {
  font-family: var(--skw-font);
  font-weight: 700;
  color: var(--skw-ink);
  letter-spacing: -0.01em;
  margin-top: 28px;
  margin-bottom: 8px;
}
.theme-new .tab-content .tab-pane h2 { font-size: var(--skw-fs-h2); }
.theme-new .tab-content .tab-pane h3 { font-size: var(--skw-fs-h3); }

.theme-new .tab-content .tab-pane a {
  color: var(--skw-accent);
  text-underline-offset: 2px;
}

/* ── Dark ── */
[data-bs-theme="dark"] .theme-new .tab-content .tab-pane { color: var(--skw-text-muted); }
[data-bs-theme="dark"] .theme-new .tab-content .tab-pane h2,
[data-bs-theme="dark"] .theme-new .tab-content .tab-pane h3 { color: var(--skw-ink); }