/* =====================================================================
   Action Connect – Corporate Design
   Palette:  #0F2537 (Navy)   #2EC4B6 (Teal)
             #A2E8DD (Mint)   #FC7C8C (Coral)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Light mode
   --------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  /* Kopfzeile / Menüband = Navy, Schrift darauf hell */
  --md-primary-fg-color:        #0F2537;
  --md-primary-fg-color--light: #1C3A52;
  --md-primary-fg-color--dark:  #0A1A28;
  --md-primary-bg-color:        #FFFFFF;
  --md-primary-bg-color--light: #A2E8DD;

  /* Interaktion (Hover, aktive Tabs, Fokus) = Teal */
  --md-accent-fg-color:             #2EC4B6;
  --md-accent-fg-color--transparent: rgba(46, 196, 182, 0.10);

  /* Fließtext-Links: abgedunkeltes Teal für ausreichenden Kontrast auf Weiß */
  --md-typeset-a-color: #12857A;

  /* Farbige Akzente */
  --md-typeset-mark-color: rgba(252, 124, 140, 0.35);   /* Coral-Highlight */
}

/* ---------------------------------------------------------------------
   Dark mode
   --------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #0F2537;
  --md-primary-fg-color--light: #1C3A52;
  --md-primary-fg-color--dark:  #0A1A28;
  --md-primary-bg-color:        #FFFFFF;

  --md-accent-fg-color:             #2EC4B6;
  --md-accent-fg-color--transparent: rgba(162, 232, 221, 0.12);

  /* Links auf dunklem Grund: helles Mint */
  --md-typeset-a-color: #A2E8DD;

  /* Seitenhintergrund leicht ins Navy getönt */
  --md-default-bg-color:        #0C1B28;
  --md-default-bg-color--light: rgba(255, 255, 255, 0.70);
  --md-default-bg-color--lighter: rgba(255, 255, 255, 0.30);

  --md-typeset-mark-color: rgba(252, 124, 140, 0.30);
}

/* ---------------------------------------------------------------------
   Fußzeile = Navy mit Teal-Kante, immer helle Schrift (auch im Light-Mode)
   --------------------------------------------------------------------- */
.md-footer {
  background-color: #0A1A28;
}
.md-footer-meta {
  background-color: #08151F;
  border-top: 2px solid #2EC4B6;
}

.md-footer__link,
.md-footer__title,
.md-footer__direction,
.md-copyright,
.md-copyright__highlight {
  color: rgba(255, 255, 255, 0.85) !important;
}
.md-copyright__highlight a {
  color: #A2E8DD !important;
  text-decoration: underline;
}
.md-copyright__highlight a:hover,
.md-footer__link:hover {
  color: #FFFFFF !important;
}

/* Social-Icons in der Fußzeile: hell auf Navy (in beiden Modi) */
.md-social__link,
.md-social__link svg,
.md-footer-social__link,
.md-footer-social__link svg {
  color: rgba(255, 255, 255, 0.85) !important;
  fill: currentColor;
}
.md-social__link:hover,
.md-social__link:hover svg,
.md-footer-social__link:hover,
.md-footer-social__link:hover svg {
  color: #FFFFFF !important;
}

.md-header,
.md-tabs {
  background-color: #0F2537;
  color: #FFFFFF;
}

/* Titel, Such-Icon, Toggle etc. hell */
.md-header__title,
.md-header__button,
.md-search__input,
.md-search__icon {
  color: #FFFFFF;
}
.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.md-search__button:before {
  background-color: #FFFFFF;
}

.md-header .md-search__button {
  color: rgba(255, 255, 255, 0.85);
}
.md-header .md-search__button::after {
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.15);
}

/* Suchfeld deutlicher vom Navy-Header abheben (Ruhezustand) */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.22);
}
.md-header .md-search__icon,
.md-header .md-search__icon svg {
  color: #FFFFFF;
  fill: currentColor;
}
.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* Aktives Such-Overlay: Feld wird hell -> Text/Lupe wieder dunkel lesbar */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--md-default-bg-color);
  border-color: transparent;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__input,
[data-md-toggle="search"]:checked ~ .md-header .md-search__icon,
[data-md-toggle="search"]:checked ~ .md-header .md-search__icon svg {
  color: var(--md-default-fg-color);
}

/* Tab-Links: gut lesbar, aktiv/hover in Mint */
.md-tabs__link {
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  color: #A2E8DD;
}
.md-tabs__link--active {
  border-bottom: 2px solid #2EC4B6;
}

/* Textmarkierung in CD-Farben */
::selection {
  background: rgba(46, 196, 182, 0.30);
}

/* Grid-Cards auf der Startseite: sanfter Hover in Teal */
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 1px var(--md-accent-fg-color);
}

.md-typeset a.glightbox img,
.md-typeset a[data-type="image"] img,
.md-typeset figure img {
  background-color: #FFFFFF;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.glightbox-container .gslide-image img,
.gslide-media img {
  background-color: #FFFFFF !important;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

[data-md-color-scheme="slate"] .md-nav--primary,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title,
[data-md-color-scheme="slate"] .md-nav--primary .md-sidebar__scrollwrap {
  background-color: #0C1B28;
  border-radius: inherit;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title {
  color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.35);
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link {
  color: rgba(255, 255, 255, 0.82);
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active {
  color: #A2E8DD;
}

/* Repo-/Quellenkachel oben im Drawer */
[data-md-color-scheme="slate"] .md-nav__source {
  background-color: #0A1A28;
  color: rgba(255, 255, 255, 0.90);
}

/* Abdunkelnder Backdrop hinter dem geöffneten Drawer */
[data-md-color-scheme="slate"] .md-overlay {
  background-color: rgba(0, 0, 0, 0.55);
}