/* ===== HerzNumerik – Light Blue UI (immer hell, schwarze Schrift) ===== */
:root{
  /* Grundfarben */
  --bg:#f6f9ff;            /* Seitenhintergrund – sehr helles Blau */
  --card:#ffffff;          /* Karten/Panele */
  --card-2:#eef4ff;        /* zarte Sekundärflächen */
  --fg:#000000;            /* Text (schwarz) */
  --muted:#56627a;         /* Sekundärtext */
  --primary:#2f6eff;       /* Akzent Blau */
  --primary-2:#5aa0ff;     /* heller Akzent */
  --success:#1fa97a;
  --danger:#e75656;
  --warning:#f0b429;
  --border:#d7e4ff;        /* zartes Blau für Ränder */
  --shadow:0 10px 24px rgba(47,110,255,.12);
  --radius:16px;
  --radius-sm:12px;
}

/* Seite */
html,body{background:var(--bg); color:var(--fg);}

/* Navbar */
.navbar{
  background:linear-gradient(90deg, #eef4ff, #f7faff);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 16px rgba(47,110,255,.06);
}
.navbar .navbar-brand{font-weight:700; letter-spacing:.2px; color:#0e1a2b}

/* Karten / Panele */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.p-3{padding:1.25rem!important}

/* Sidebar sticky */
.sticky-inputs{position:sticky; top:1rem}
.form-label{font-weight:600}
.help, .muted, .form-text{color:var(--muted)!important}

/* Inputs & Focus */
.form-control, .form-select{
  border:1px solid var(--border);
  background:#fff; color:var(--fg);
}
.form-control:focus, .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(47,110,255,.15);
}

/* Tabs – modern, hellblau */
.tab-scroll{position:relative; overflow:auto; -webkit-overflow-scrolling:touch;}
.tab-scroll::-webkit-scrollbar{height:0}
.modern-tabs{border-bottom:none; gap:.5rem; flex-wrap:nowrap}
.modern-tabs .nav-link{
  border:1px solid transparent;
  border-radius:999px;
  color:var(--muted);
  background:transparent;
  padding:.5rem .875rem;
  white-space:nowrap;
}
.modern-tabs .nav-link:hover{
  color:var(--fg);
  background:#e9f1ff;
  border-color:var(--border);
}
.modern-tabs .nav-link.active{
  color:var(--fg);                    /* bleibt schwarz */
  background:linear-gradient(180deg, #eaf2ff, #dfe9ff);
  border-color:var(--border);
  box-shadow:0 6px 16px rgba(47,110,255,.12);
}
@media (max-width: 576px){
  .modern-tabs .nav-link{padding:.5rem .75rem; font-size:.95rem}
}

/* Number Pills */
.pill-row{display:flex; flex-wrap:wrap; gap:.5rem}
.number-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:999px;
  background:#f3f7ff;               /* hellblau */
  border:1px solid var(--border);
  font-weight:600; font-size:.95rem;
  color:var(--fg);                   /* schwarz */
}
.number-pill b{font-weight:700}
.number-pill small{opacity:.7}

/* Spezial-Pills */
.pill-master{
  background:#fff7da;               /* sanft golden */
  border-color:#ffe6a6;
}
.pill-debt{
  background:#ffeaea;               /* sanft rot */
  border-color:#ffd0d0;
}
.pill-tarot{
  background:#eaf2ff;               /* sanft blau */
  border-color:var(--border);
}
.pill-planet{
  background:#eafaf5;               /* sanft türkis */
  border-color:#c7efe2;
}

/* Tabellen (klar & hell) */
.table{
  --bs-table-color:var(--fg);
  --bs-table-bg:transparent;
  --bs-border-color:var(--border);
}
.table th{color:#32415b; font-weight:600; width:40%}
.table-responsive{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card-2);
}

/* Meaning Cards */
#meaningList{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
@media (max-width: 992px){ #meaningList{grid-template-columns:1fr} }
.meaning-card{
  background:var(--card-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:1rem;
}
.meaning-card .title{font-weight:700; margin-bottom:.25rem; color:#0e1a2b}
.meaning-card .subtitle{color:var(--muted); font-size:.95rem; margin-bottom:.5rem}
.meaning-card .row{--bs-gutter-x:1rem}

.tag{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  background:#f3f7ff; border:1px solid var(--border);
  font-size:.825rem; font-weight:600; color:var(--fg);
}
.tag.success{background:#e8f8f2; border-color:#c7efe2}
.tag.danger{background:#ffeaea; border-color:#ffd0d0}

/* Tarot-Minicards (falls genutzt) */
#tarotMeanings .card-tarot{
  background:var(--card-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.875rem; margin-bottom:.75rem;
}
#tarotMeanings .card-tarot .hd{display:flex; justify-content:space-between; gap:.5rem; font-weight:700; color:#0e1a2b}
#tarotMeanings .card-tarot .meta{color:var(--muted); font-size:.9rem}

/* Hinweisbox & Buttons */
.legend-box{
  border:1px dashed #cfe0ff;
  border-radius:var(--radius-sm);
  padding:.75rem;
  background:#f7faff;
  color:var(--fg);
}
.btn{border-radius:12px}
.btn-outline{
  border-color:var(--border);
  color:#0e3a8a;                     /* dezentes Blau für Text */
  background:#ffffff;
}
.btn-outline:hover{
  background:#eaf2ff; border-color:#bfd1ff;
}

/* Bootstrap Farb-Overrides (dezenter) */
.progress{background:#edf3ff; border:1px solid var(--border)}
.progress-bar.bg-primary{background-color:#6aa3ff!important; color:#0e1a2b}
.progress-bar.bg-success{background-color:#9ee7cf!important; color:#0e1a2b}
.progress-bar.bg-info{background-color:#bcd9ff!important; color:#0e1a2b}
.progress-bar.bg-warning{background-color:#ffe3a3!important; color:#0e1a2b}

/* Links */
a{color:#1548ff; text-decoration:none}
a:hover{text-decoration:underline}

/* Print (bleibt hell) */
@media print{
  .no-print, .navbar, .tab-scroll, .nav, .modal{display:none!important}
  body{background:#fff; color:#000}
  .card, .table-responsive{box-shadow:none; border-color:#cfd8ea}
}