@media (prefers-color-scheme: dark)  {
  :root { color-scheme: dark; }
  body { 
    background: #1d2429; 
    color: #aab4ba; 
  }

/* ==========================================================================
   Dark Mode – Überschreibungen der hellen Theme-Farben
   (editorial-2 / Massively) – gilt nur bei prefers-color-scheme: dark
   Akzentfarbe --color (#F56A6A) und Social-Brand-Colors bleiben erhalten.
   ========================================================================== */

  /* ------------------------------------------------------------------
     Textfarben: fette Hervorhebungen, Überschriften, Labels, Tabellen,
     Menü, Trennzeichen
     ------------------------------------------------------------------ */
  b, strong,
  h1, h2, h3, h4, h5, h6,
  label,
  table th,
  select option,
  #menu ul,
  .separator::before,
  .separator--dot::before {
    color: #e9edee;
  }

  #search form:before {
    color: #aab4ba;
  }

  #footer .copyright {
    color: #8a949b;
  }

  /* ------------------------------------------------------------------
     Borders/Trennlinien überall von hellgrau auf dezentes Weiß
     ------------------------------------------------------------------ */
  blockquote,
  hr,
  .box,
  code,
  table tbody tr,
  table thead,
  table tfoot,
  table.alt tbody tr td,
  .mini-posts article,
  .features article .icon:after,
  ul.alt li,
  ul.contact li,
  #main>.inner>section,
  .pagination,
  .page-header,
  .subpages,
  #sidebar>.inner>*,
  #menu>ul>li,
  .post__share>a,
  .separator--long-line::after {
    border-color: rgba(255, 255, 255, .15);
  }
  #menu>ul>li>ul {
    color: #fff;
  }

  .posts article:before,
  .posts article:after {
    background: rgba(255, 255, 255, .15);
  }

  #sidebar .toggle:after {
    background: rgba(255, 255, 255, .15);
  }

  /* ------------------------------------------------------------------
     Formulare und Eingabeelemente
     ------------------------------------------------------------------ */
  input[type=email],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=text],
  input[type=url],
  select,
  textarea {
    background: #263038;
  }

  select option {
    background: #1d2429;
  }

  input[type=checkbox]+label:before,
  input[type=radio]+label:before {
    background: #263038;
  }

  input[type=checkbox]:checked+label:before,
  input[type=radio]:checked+label:before {
    background: #3a454d;
    border-color: #3a454d;
  }

  ::-webkit-input-placeholder { color: #5c676e !important; opacity: 1; }
  :-moz-placeholder { color: #5c676e !important; opacity: 1; }
  ::-moz-placeholder { color: #5c676e !important; opacity: 1; }
  :-ms-input-placeholder { color: #5c676e !important; opacity: 1; }

  code {
    background: rgba(255, 255, 255, .06);
  }

  table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .04);
  }

  /* ------------------------------------------------------------------
     Flächen: Sidebar, Bilder, Gallerie, Embed-Overlay
     ------------------------------------------------------------------ */
  #sidebar {
    background-color: #232b31;
  }

  #sidebar>.inner>.alt {
    background-color: #2a343b;
  }

  .image {
    background-color: #263038;
  }

  .image figcaption {
    background-color: #263038;
  }

  .gallery__item a {
    background-color: #263038;
  }

  .pec-overlay {
    background-color: #263038;
  }

  /* ------------------------------------------------------------------
     Hinweiskästen (.msg) – dunkle Pendants
     ------------------------------------------------------------------ */
  .msg--highlight {
    background-color: #2b2717;
  }

  .msg--info {
    background: #16262f;
  }

  .msg--success {
    background: #1b2a20;
  }

  .msg--warning {
    background: #2e1c1c;
    color: #f0a0a0;
  }

  /* ------------------------------------------------------------------
     Header und Termine-Karten (eigene Anpassungen)
     ------------------------------------------------------------------ */
  .site-title {
    color: #fff;
  }

  .event {
    background: #263038;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 .25em .75em rgba(0, 0, 0, .35);
  }

  .event:hover {
    box-shadow: 0 .5em 1.25em rgba(0, 0, 0, .45);
  }

  .event-body p {
    color: rgba(255, 255, 255, .65);
  }

  /* Karusell-Punkte */
  .carousel-track > section#banner {
    border-top-color: rgba(255, 255, 255, .15);
  }

  .carousel-dots button {
    background: rgba(255, 255, 255, .25);
  }

  .carousel-dots button:hover {
    background: rgba(255, 255, 255, .5);
  }
}