/* ========================
   Dark/Light Switch
   ======================== */

/* Container */
.darklight-container {
  background: none !important;
  border: none !important;
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  background-color: transparent;
}

/* Button */
#darklight-toggle {
  padding: 0.5rem 1rem;
  min-width: 120px;
  text-align: left;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.3s, color 0.3s;
}

/* Dropdown */
.darklight-list {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  width: 100%;
  min-width: 120px;
  border: none !important;
  z-index: 1000;
  transition: background-color 0.3s, color 0.3s;
}

/* Items */
.darklight-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-align: left;
}

/* Light Theme */
html.theme-light #darklight-toggle,
html.theme-light .darklight-list,
html.theme-light .darklight-item {
  background-color: #ffffff;
  color: #1e1e1e;
  font-size: 0.8rem;
  min-width: 125px;
  border: 0.2px solid #cacaca;
  border-radius: 4px;
}

html.theme-light .darklight-item:hover {
  background-color: #dddddd;
  color: #ffffff;
  box-shadow: none !important;
}

/* Dark Theme */
/* Dark Theme – gemeinsame Basis */
html.theme-dark #darklight-toggle,
html.theme-dark .darklight-list,
html.theme-dark .darklight-item {
  font-size: 0.8rem;
  min-width: 125px;
  border: 0.2px solid #606060;
  border-radius: 4px;
}

/* Dark Theme – spezifisch */
html.theme-dark .darklight-list {
  background-color: transparent;
}

html.theme-dark .darklight-item {
  background-color: #1e1e1e;
}

html.theme-dark .darklight-item:hover {
  background-color: #3b3b3b;
  color: #e0e0e0;
  border: 0.2px solid #606060;
}

/* ========================
   Body / Grundfarben
   ======================== */

html.theme-dark #start {
  background-color: #1e1e1e;
}

body {
  background-color: #ffffff;
  color: #2a2a2a;
  transition: background-color 0.3s, color 0.3s;
}

html.theme-dark body {
  background-color: #1e1e1e; /* dunkles Anthrazit */
  color: #e0e0e0;
}

/* ========================
   Dark Mode: Links, Header, Navigation
   ======================== */

/* Links */
html.theme-dark a,
html.theme-dark a:visited {
  color: #4fc3f7;
}

html.theme-dark a:hover {
  color: #81d4fa;
}

/* Header */
html.theme-dark #header,
html.theme-dark header,
html.theme-dark .navbar,
html.theme-dark .navbar-section {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-bottom: 1px solid #333;
}

html.theme-dark #header a,
html.theme-dark header a,
html.theme-dark .navbar-section a {
  color: #4fc3f7;
}

html.theme-dark #header a:hover,
html.theme-dark header a:hover,
html.theme-dark .navbar-section a:hover {
  color: #81d4fa;
}

/* Navigation einheitlich */
html.theme-dark #header,
html.theme-dark #header a,
html.theme-dark .dropmenu ul li a {
  color: #4fc3f7;
}

html.theme-dark .dropmenu ul li a:hover,
html.theme-dark .dropmenu ul li a.active {
  color: #4fc3f7;
}

/* Header & Überschriften */
html.theme-dark #header {
  color: #e0e0e0;
}

html.theme-dark #header a {
  color: #e0e0e0;
}

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6 {
  color: #f0f0f0;
}



/* ========================
   Dark Mode: Footer
   ======================== */

html.theme-dark #footer,
html.theme-dark footer {
  background-color: #333 !important;
  color: #e0e0e0;
  border-top: 1px solid #333;
}

html.theme-dark #footer a,
html.theme-dark footer a {
  color: #4fc3f7;
}

html.theme-dark #footer a:hover,
html.theme-dark footer a:hover {
  color: #81d4fa;
}

/* Herz-Icon im Footer */
html.theme-dark #footer .fa-heart-o {
  color: #e85600 !important;
}

/* Optional: Buttons, Toggles etc. */
html.theme-dark #footer button,
html.theme-dark #footer .darklight-container {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border: 0.5px solid #606060;
}

/* ========================
   Dark Mode: Karten, Shortcodes, Notices
   ======================== */

/* Cards */
html.theme-dark .card,
html.theme-dark .card-footer,
html.theme-dark .modular-features .frame-box {
  background-color: #2a2a2a;
  color: #f0f0f0;
  border-color: #333;
}

@media (max-width: 840px) {
  html.theme-dark .card,
  html.theme-dark .card-footer,
  html.theme-dark .modular-features .frame-box {
    background-color: #1e1e1e;
    color: #f0f0f0;
    border-color: #333;
  }
}

/* Card Titles */
html.theme-dark .card-title h5.p-name {
  color: #ffffff;
}

/* Shortcodes (Bilder, Videos, Adressen) */
html.theme-dark .adresse-shortcode-link a,
html.theme-dark .adresse-shortcode-box {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* Shortcodes (Bilder, Videos, Adressen) */
html.theme-dark .bild-shortcode figcaption,
html.theme-dark .video-shortcode figcaption {
  background-color: #3a3a3a;
  color: #b3b3b3;
}

/* Notices */
html.theme-dark .notices {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-left-color: #4fc3f7;
}

html.theme-dark .notices.blue {
  background-color: #264f60;
  border-left-color: #4fc3f7 !important;
}



/* ========================
   Dark Mode: Previous/Next Buttons
   ======================== */

html.theme-dark .prev-next .btn {
  background-color: #2a2a2a;
  color: #4fc3f7;
  border-color: #4fc3f7;
}

html.theme-dark .prev-next .btn:hover {
  background-color: #4fc3f7;
  color: #1e1e1e;
  border-color: #4fc3f7;
}



/* ========================
   Dark Mode: Adresssuche
   ======================== */

html.theme-dark input.adresssuche-search-input {
  background-color: #313131;
  color: #e6e6e6;
  border-color: #5c5c5c;
}

html.theme-dark .adresssuche-search-input::placeholder {
  color: #adadad;
}

html.theme-dark .adresssuche-search-input:focus {
  border-color: #4fc3f7;
}

/* Karten */
html.theme-dark .adresssuche-address-card-flat {
  background-color: #1f1f1f;
}

/* Titel */
html.theme-dark .adresssuche-address-titel {
  color: #f0f0f0;
}

/* Textblöcke */
html.theme-dark .adresse-block {
  color: #d0d0d0;
}

/* Kontakt-Links */
html.theme-dark .kontakt-links a {
  color: #4fc3f7;
}

html.theme-dark .kontakt-links a:hover {
  color: #81d4fa;
}



/* ========================
   Dark Mode: Kontaktformular
   ======================== */

/* Eingabefelder allgemein */
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  background-color: #313131;
  color: #e6e6e6;
  border-color: #5c5c5c;
}

/* Placeholder */
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
  color: #adadad;
}

/* Fokus-Zustand */
html.theme-dark input:focus,
html.theme-dark textarea:focus,
html.theme-dark select:focus {
  outline: none;
  border-color: #7a7a7a;
}

/* Labels und Formulartexte */
html.theme-dark label,
html.theme-dark .form-label {
  color: #d0d0d0;
}

/* Buttons im Formular (nicht der Dark/Light-Button!) */
html.theme-dark form button,
html.theme-dark form .button {
  background-color: #3a3a3a;
  color: #e6e6e6;
  border-color: #5c5c5c;
}

html.theme-dark form button:hover,
html.theme-dark form .button:hover {
  background-color: #d10f0f;
}

/* Hinweise, Fehler- und Statusmeldungen */
html.theme-dark .form-errors,
html.theme-dark .form-success {
  background-color: #2a2a2a;
  color: #e6e6e6;
}