/* ImagicX: Grundlagen fuer alle Seiten (Farben, Schrift, Kopf- und Fusszeile, Bootstrap-Anpassungen) */

:root {
  --ix-black: #080a0c;
  --ix-surface: #111619;
  --ix-raised: #171e23;
  --ix-line: #2c3a42;
  --ix-line-soft: #1f2a30;
  --ix-paper: #e6eef2;
  --ix-muted: #8399a5;
  --ix-safelight: #35c8f0;
  --ix-safelight-hot: #5ad8fb;
  --ix-safelight-soft: rgba(53, 200, 240, 0.13);
  --ix-prism: linear-gradient(90deg, #ff4b28, #ffab4d, #6ee7a0, #5ab9ff, #a78bfa);
  --ix-radius: 3px;

  --bs-primary: #35c8f0;
  --bs-primary-rgb: 53, 200, 240;
  --bs-body-bg: #0c0a09;
  --bs-body-color: #f4ece1;
}

body {
  background-color: var(--ix-black);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(53, 200, 240, 0.10) 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(53, 200, 240, 0.05) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--ix-paper);
  font-family: Chivo, "Helvetica Neue", sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

@media (max-width: 991.98px) {
  body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Koernung als Akzent: nur auf hervorgehobenen Flaechen, schwach und aus einer Ecke auslaufend */
header.bg-dark.py-5,
.user-hero-card,
.profile-tabs-card {
  isolation: isolate;
}

header.bg-dark.py-5::after,
.user-hero-card::after,
.profile-tabs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
}

/* Schrift */
h1, h2, h3, .display-5, .navbar-brand {
  font-family: Chivo, "Helvetica Neue", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ix-paper);
}

h1, .display-5 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); line-height: 1.15; }
h3 { font-size: 1.3rem; }

h4, h5, h6, .footer-title, .card-title {
  font-family: Chivo, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

p, .lead { max-width: 64ch; }
.lead { font-size: 1.08rem; color: var(--ix-muted); font-weight: 300; }
.text-white-50, .text-muted { color: var(--ix-muted) !important; }

a { color: var(--ix-paper); text-decoration-color: var(--ix-line); text-underline-offset: 4px; }
a:hover { color: var(--ix-safelight); }

:focus-visible { outline: 2px solid var(--ix-safelight); outline-offset: 3px; }

.message { color: red; text-align: center; display: block; }
.border-dashed { border-style: dashed !important; }

/* Kopfzeile */
.navbar.bg-dark {
  /* backdrop-filter bildet eine eigene Ebene: ohne z-index liegen spaeter positionierte
     Bereiche (Startseiten-Kopf, Karten) ueber dem Konto-Dropdown */
  position: relative;
  z-index: 1040;
  background-color: rgba(12, 10, 9, 0.88) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ix-line-soft);
  padding-block: 0.8rem;
}

.navbar-brand { width: auto; height: 34px; margin-right: 1.5rem; }

.navbar-dark .navbar-nav .nav-link {
  color: var(--ix-muted);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-inline: 0.9rem;
  position: relative;
}

.navbar-dark .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.2rem;
  height: 1px;
  background: var(--ix-safelight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.navbar-dark .navbar-nav .nav-link:hover { color: var(--ix-paper); }
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-dark .navbar-nav .nav-link.active { color: var(--ix-paper); }

/* Konto-Dropdown: gleiche Hover-Sprache wie die Navigation, Linie statt heller Flaeche */
.navbar .dropdown-menu { padding-block: 0.4rem; }

.navbar .dropdown-item {
  position: relative;
  padding: 0.55rem 1rem;
  color: var(--ix-paper);
  background: transparent;
  transition: color 0.2s ease;
}

.navbar .dropdown-item::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0.25rem;
  height: 1px;
  background: var(--ix-safelight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible,
.navbar .dropdown-item:active {
  background: transparent;
  color: #fff !important;
}

.navbar .dropdown-item:hover::after,
.navbar .dropdown-item:focus-visible::after { transform: scaleX(1); }

.navbar .dropdown-item.text-danger:hover,
.navbar .dropdown-item.text-danger:focus-visible { color: #ff6b6b !important; }
.navbar .dropdown-item.text-danger::after { background: #ff6b6b; }

/* Senkrechte Menues. Der Body ist selbst .d-flex.flex-column, deshalb trifft die Regel
   jeden .nav-link; die Kopfzeile wird direkt danach wieder zurueckgesetzt. */
.nav-pills .nav-link,
.d-flex.flex-column .nav-link {
  color: var(--ix-muted);
  font-family: Chivo, sans-serif;
  font-size: 0.95rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--ix-radius);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-pills .nav-link:hover,
.d-flex.flex-column .nav-link:hover {
  color: var(--ix-paper);
  background-color: rgba(255, 255, 255, 0.04);
  border-left-color: var(--ix-safelight);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ix-safelight-soft);
  color: var(--ix-paper);
  border-left-color: var(--ix-safelight);
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link:hover {
  background-color: transparent;
  border-left: 0;
  border-radius: 0;
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem;
}

.d-flex.flex-column hr { border-color: var(--ix-line-soft); opacity: 1; }
.d-flex.flex-column .nav-link p { margin-bottom: 0; color: var(--ix-muted); }

@media (max-width: 767.98px) {
  .navbar .container { padding-inline: 1rem !important; }
  .navbar-collapse { padding-block: 0.5rem 0.25rem; }
  .navbar-dark .navbar-nav .nav-link { padding-block: 0.7rem; font-size: 0.95rem; }
  .navbar-nav .nav-item.ms-lg-2 { margin-top: 0.5rem; }
  .navbar-nav .nav-item.ms-lg-2 .btn { width: 100%; }
  .dropdown-menu { width: 100%; }
}

/* Fusszeile */
footer, .footer { background-color: transparent; border-top: 1px solid var(--ix-line-soft); }
.footer-list { list-style: none; padding-left: 0; }
.footer-list li { margin-bottom: 0.35rem; }
.footer-list a { color: var(--ix-muted); text-decoration: none; font-size: 0.95rem; }
.footer-list a:hover { color: var(--ix-safelight); }
.footer-title { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ix-paper); margin-bottom: 1rem; }

footer.footer { padding-block: 3.5rem 2rem !important; margin-top: 0 !important; }
footer .footer-logo h2 { margin-bottom: 0.75rem; }
footer .footer-logo h2 p {
  font-family: Chivo, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.35rem;
  color: var(--ix-paper) !important;
  margin-bottom: 0;
}
footer .footer-logo > p.text-white { color: var(--ix-muted) !important; font-size: 0.97rem; }

@media (max-width: 767.98px) {
  footer.footer { padding-block: 2.5rem 1.5rem !important; }
  footer .footer-logo { margin-bottom: 1.5rem; }
  footer .footer-title { margin-bottom: 0.6rem; }

  /* Kompakt: Beschreibung, darunter zwei Linkspalten nebeneinander */
  footer.footer .row > .col-lg-3.col-md-4 { flex: 0 0 50%; max-width: 50%; margin-top: 1.25rem !important; }
  footer.footer .row > .col-lg-2.col-md-4 { display: none; }
  footer.footer .footer-logo h2 { margin-bottom: 0.25rem; }
  footer.footer .footer-logo { margin-bottom: 0; }
  footer.footer .row + .row { margin-top: 1.25rem; }
  footer.footer .footer-list { margin-bottom: 0; }
  footer.footer .footer-list li:last-child { margin-bottom: 0; }
  footer.footer p.text-center { font-size: 0.85rem; font-weight: 400; }
}

/* Knoepfe */
.btn {
  font-family: Chivo, sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  border-radius: var(--ix-radius);
  padding: 0.75rem 1.5rem;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.8rem; letter-spacing: 0.03em; }

.btn-primary {
  background-color: var(--ix-safelight);
  border-color: var(--ix-safelight);
  color: #04161c;
  box-shadow: 0 0 0 0 var(--ix-safelight-soft);
}

.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--ix-safelight-hot);
  border-color: var(--ix-safelight-hot);
  color: #04161c;
  box-shadow: 0 0 28px -6px rgba(53, 200, 240, 0.5);
}

.btn-outline-light {
  border-color: var(--ix-line);
  color: var(--ix-paper);
  background: transparent;
}

.btn-outline-light:hover {
  background-color: transparent;
  border-color: var(--ix-safelight);
  color: var(--ix-safelight);
}

.btn-danger {
  background-color: transparent;
  border-color: var(--ix-line);
  color: var(--ix-paper);
}

.btn-danger:hover, .btn-danger:focus-visible {
  background-color: rgba(214, 69, 69, 0.14);
  border-color: #d64545;
  color: #ff8f8f;
}

.btn-link {
  color: var(--ix-muted);
  text-decoration: none;
  font-weight: 500;
}

.btn-link:hover, .btn-link:focus-visible { color: var(--ix-safelight); text-decoration: underline; }

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

@media (max-width: 767.98px) {
  .btn { padding: 0.8rem 1.25rem; }
  .btn-sm { padding: 0.5rem 0.85rem; }
}

/* Flaechen */
.magic_black, .card, .login, .upload_form {
  background-color: var(--ix-surface);
  border: 1px solid var(--ix-line-soft);
  border-radius: var(--ix-radius);
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .card-body { padding: 1rem; }
}

.alert { border-radius: var(--ix-radius); border: 1px solid var(--ix-line); }

.mb_pos {
  z-index: 2;
  position: fixed;
  top: 2%;
  right: 1%;
}

/* Formulare */
.form-control, .form-select, .input-group-text {
  background-color: rgba(0, 0, 0, 0.35);
  border-color: var(--ix-line);
  color: var(--ix-paper);
  border-radius: var(--ix-radius);
}

.form-control:focus, .form-select:focus {
  background-color: rgba(0, 0, 0, 0.45);
  border-color: var(--ix-safelight);
  box-shadow: 0 0 0 3px var(--ix-safelight-soft);
  color: var(--ix-paper);
}

.form-control::placeholder { color: #6d7f8a; }
.input-group-text.bg-primary { background-color: var(--ix-raised) !important; color: var(--ix-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ix-safelight); }

/* Auf Touch-Geraeten mindestens 16px, sonst zoomt iOS beim Antippen */
@media (hover: none) and (pointer: coarse) {
  .form-control, .form-select, input[type="text"], input[type="email"],
  input[type="password"], input[type="number"], textarea {
    font-size: 16px;
  }
}

/* Dialoge */
.modal-content {
  background-color: var(--ix-raised);
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  color: var(--ix-paper);
}

.modal-header {
  border-bottom: 1px solid var(--ix-line-soft);
  padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
  font-family: Chivo, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ix-paper);
}

.modal-footer {
  border-top: 1px solid var(--ix-line-soft);
  padding: 1rem 1.5rem;
}

.modal-body {
  padding: 1.5rem;
}

@media (max-width: 991.98px) {
  .modal-dialog { margin: 0.5rem; }
}

/* Aufklappbereiche */
.accordion {
  --bs-accordion-bg: var(--ix-surface);
  --bs-accordion-color: var(--ix-paper);
  --bs-accordion-border-color: var(--ix-line-soft);
  --bs-accordion-border-radius: var(--ix-radius);
  --bs-accordion-inner-border-radius: var(--ix-radius);
  --bs-accordion-btn-color: var(--ix-paper);
  --bs-accordion-btn-bg: var(--ix-surface);
  --bs-accordion-active-color: var(--ix-paper);
  --bs-accordion-active-bg: var(--ix-raised);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--ix-safelight-soft);
}

.accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); }

/* Tabellen */
.table {
  --bs-table-color: var(--ix-paper);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ix-line-soft);
  --bs-table-striped-color: var(--ix-paper);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-hover-color: var(--ix-paper);
  --bs-table-hover-bg: rgba(53, 200, 240, 0.07);
  --bs-table-active-color: var(--ix-paper);
  --bs-table-active-bg: rgba(53, 200, 240, 0.1);
  color: var(--ix-paper);
}

.table > :not(caption) > * > * { border-bottom-color: var(--ix-line-soft); }

.table > thead th {
  color: var(--ix-muted);
  font-family: Chivo, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom-color: var(--ix-line);
}

.table > tbody td { color: var(--ix-paper); border-color: var(--ix-line-soft); }
.table-sm td, .table-sm th { color: var(--ix-paper); }
.table-sm td strong { color: var(--ix-paper); }

@media (max-width: 991.98px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* DataTables */
.dataTables_wrapper { color: var(--ix-muted); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: white !important; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ix-line);
  color: var(--ix-paper);
  border-radius: var(--ix-radius);
  padding: 0.3rem 0.55rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--ix-safelight);
  box-shadow: 0 0 0 3px var(--ix-safelight-soft);
  outline: none;
}

table.dataTable > thead .sorting:before, table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_desc:after { color: var(--ix-muted); opacity: 0.5; }

@media (max-width: 991.98px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: left;
    margin-bottom: 0.5rem;
  }

  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
  .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
}

/* Seitenzahlen */
.page-link {
  background-color: transparent;
  border-color: var(--ix-line-soft);
  color: var(--ix-muted);
  border-radius: var(--ix-radius) !important;
  margin-inline: 1px;
}

.page-link:hover { background-color: rgba(255, 255, 255, 0.05); border-color: var(--ix-line); color: var(--ix-paper); }
.page-link:focus { box-shadow: 0 0 0 3px var(--ix-safelight-soft); background-color: transparent; color: var(--ix-paper); }

.page-item.active .page-link {
  background-color: var(--ix-safelight);
  border-color: var(--ix-safelight);
  color: #04161c;
  font-weight: 600;
}

.page-item.disabled .page-link { background-color: transparent; border-color: var(--ix-line-soft); color: #4d5c64; }

/* Kennzeichnungen (Bootstrap .badge) */
.badge { font-weight: 600; border-radius: 2px; letter-spacing: 0.05em; }