:root {
      --mdc-radius: 1.2rem;
      --mdc-radius-lg: 1.6rem;
      --shadow-xs: 0 2px 6px rgba(0,0,0,.06);
      --shadow-md: 0 10px 30px rgba(0,0,0,.10);
      --shadow-lg: 0 20px 50px rgba(0,0,0,.18);

      /* Gradients */
      --grad-1: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
      --grad-2: linear-gradient(135deg, #ec4899 0%, #ef4444 100%);
      --grad-3: linear-gradient(135deg, #10b981 0%, #34d399 100%);
      --grad-4: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
      --grad-5: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
      --grad-6: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);

      --surface: #0b1020;
      --surface-2: #0f172a;
      --card: #0b0f1a;
      --text: #e5e7eb;
      --muted: #a4acc4;
      --border: rgba(255,255,255,.06);
    }
    /* Card transparent */
.card.hero {
  background-color: rgba(255, 255, 255, 0.1); /* leicht durchsichtig */
  backdrop-filter: blur(6px); /* schöner Glas-Effekt */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Inputs transparent */
.form-control {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff; /* Text hell */
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Placeholder hell */
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.bg-gradient-orange {
  background: linear-gradient(135deg, #ff7043, #ffab91);
}
.bg-gradient-green {
  background: linear-gradient(135deg, #009688, #4db6ac);
}
.btn-primary, .btn-primary:hover {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff6c00 !important;
  --bs-btn-border-color: #ff6c00 important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff6c00 important;
  --bs-btn-hover-border-color: #ff6c00 important;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff6c00 important;
  --bs-btn-active-border-color: #ff6c00 important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ff6c00 important;
  --bs-btn-disabled-border-color: #ff6c00 important;
}
a {color: #ff6c00; }
outline-like {
    border-color:#ff6c00
    color: #ff6c00;
  }

html, body { 
	background: radial-gradient(1000px 600px at 10% -10%, rgba(99,102,241,.15), transparent 60%),radial-gradient(900px 500px at 90% 0%, rgba(34,211,238,.12), transparent 60%), var(--surface-2); 
	background-size: cover;
	color: var(--text); 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:1.25rem;

.bg-gradient {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-to)) !important;
}
.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent !important;
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.navbar.bg-gradient { background: linear-gradient(135deg, #1f1c2c, #928dab) !important; }

.card-elevated { border: none; box-shadow: 0 6px 20px rgba(0,0,0,.12); border-radius: 1rem; }
.btn-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.btn-outline-like { border-color: rgba(220,53,69,.35); color: #dc3545; }
.btn-outline-like:hover { background: rgba(220,53,69,.08); }

.badge.bg-gradient { color: #fff; }
.post-content a { text-decoration: none; }

/* like count alignment */
.btn .like-count, .btn .reply-like-count { min-width: 1.5rem; display: inline-block; text-align: left; }