/* Haupt-Styles für CollectAll */
:root{
  --bg: #0b0b0b;
  --card: #1a1a1a;
  --text: #d4af73; /* Gold wie Logo-Elemente */
  --muted: #b8945e;
  --header-bg: #0f1b24; /* Dunkles Blau passend zum Logo-Hintergrund */
  --header-text: #d4af73; /* Textfarbe wie im Logo */
  /* Landing-optimierte Zusatztöne */
  --text-plain: #f2ead6; /* helle Lesefarbe auf dunkel */
  --text-soft: #e6d9bd;  /* Sekundärtext etwas wärmer */
  --card-bg: rgba(255,255,255,.02);
  --card-bg-hover: rgba(255,255,255,.05);
  --card-border: rgba(212,175,115,.38);
  --card-border-strong: rgba(212,175,115,.58);
}

html, body { height: 100%; }
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.navbar { background-color: var(--header-bg); }
footer { background-color: var(--header-bg); color: var(--header-text); }
footer a { color: var(--header-text) !important; }
footer { border-top: 1px solid rgba(255,255,255,.08); }
.nav-link, .navbar-brand { color: var(--header-text) !important; }
/* Globale Links behalten Goldton bei – Buttons ausnehmen, damit Hover-Lesbarkeit erhalten bleibt */
a:not(.btn) { color: var(--text) !important; }

/* Stelle sicher, dass die Navbar die definierten Header-Farben nutzt */
.navbar .navbar-brand, .navbar .nav-link { color: var(--header-text) !important; }
.navbar-brand .brand-text { color: inherit; font-weight: 600; }
.btn-outline-warning { border-color: var(--text); color: var(--text); transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.btn-outline-warning:hover,
.btn-outline-warning:focus { background: var(--text); color: #111 !important; border-color: var(--text); }
.btn-outline-warning:active { background: var(--text); color: #111 !important; border-color: var(--text); }
.btn-outline-warning:disabled { color: var(--text); border-color: var(--text); opacity: .65; }
.nav-link.active, footer a.active { text-decoration: underline; font-weight: 600; }

/* Header Brand Logo */
.navbar-brand .brand-logo{
  height: clamp(24px, 2.5vw, 36px);
  width: auto;
  display: block;
}

.hero {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding: 2rem 0;
}
.hero .brand-icon { max-width: 180px; margin-top: .25rem; }
/* Inline-Icon vor dem Titel im Content-Bereich */
.hero .brand-icon--on-content {
  height: clamp(36px, 5vw, 56px);
  width: auto;
  max-width: none;
  background-color: var(--bg);
  border-radius: 6px;
}
.hero .hero-title { column-gap: .5rem; }

/* Language switcher */
.lang-switcher {
  min-width: 140px;
}

footer { border-top: 1px solid #333; padding: 1rem; margin-top: 2rem; text-align: center; font-size: .9rem; }

/* Landing sections */
.section-title { letter-spacing: .02em; color: var(--text); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.15rem); }
.feature-icon { font-size: 1.4rem; color: var(--text); min-width: 1.4rem; flex-shrink: 0; margin-top: .15rem; }
.card.border { border-color: var(--card-border) !important; }
.text-body-secondary { color: var(--text-soft) !important; opacity: .98; }
.card.bg-transparent { background-color: var(--card-bg); color: var(--text-plain); }
.feature-item strong { color: var(--text); display: block; margin-bottom: .125rem; font-weight: 700; }
.card.bg-transparent:hover { background-color: var(--card-bg-hover); border-color: var(--card-border-strong) !important; transition: background-color .18s ease, border-color .18s ease; }
.card .h5 { font-weight: 600; line-height: 1.25; }

/* Abstände zwischen Elementtitel und Text in den Karten harmonisieren */
.feature-item .d-flex + div, .card .h5 + p { margin-top: .125rem; }

/* Heading/Section vertikale Rhythmik in Landing-Abschnitten */
section.container { scroll-margin-top: 4rem; }
.visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }

/* Breadcrumb styling for dark theme */
.breadcrumb { background: transparent; margin-bottom: 0; padding: 0; }
.breadcrumb-item { color: var(--text-soft); }
.breadcrumb-item a { color: var(--text) !important; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-soft); }