/* Dark mode overrides for drwetter.eu */

body.dark {
  background: #1e293b;
  color: hsla(215, 15%, 80%, 0.7);
  /* brand colour for logo + headings; set the light-mode value later in base.css */
  --accent: #d5960d;
  /* secondary heading colour (h3/h4) */
  --sub-accent: #656f79;
  /* bold lead label of a list item (news entries, kontakt entries) */
  --item-label: #656f79;
  /* link colour in dark mode */
  --link-color: #eeeeee;
  /* hover colour for links in dark mode */
  --link-hover: #4080ff;
  /* colour of the dotted underline (lighter grey than the text) */
  --link-dot: #8b97a3;
}

body.dark #map {
  background-color: #1e293b;
  box-shadow: none;
}

body.dark .workzone {
  background: #1e293b;
}

body.dark .content_map {
  background: #1e293b;
  border-left: none;
  border-right: none;
}

body.dark #sub_profile {
  background: transparent;
}

body.dark .claim {
  background: #0f172a;
  color: hsla(215, 15%, 90%, 0.82);
  box-shadow: 0px 2px 1px 1px #334155;
  border: none;
}

body.dark .claim h1 {
  color: var(--accent);
}

body.dark .claim h3 {
  color: var(--sub-accent);
}

body.dark .rahmen {
  background: #0f172a;
  color: hsla(215, 15%, 90%, 0.82);
  border: none;
}

body.dark .rahmen h1,
body.dark .rahmen h2 {
  color: var(--accent);
}

/* grey lead labels in the first three profile bullets only */
body.dark .profile_list > li:nth-child(-n+3) strong {
  color: var(--item-label);
}

/* grey contact labels in the imprint (Telefon / E-Mail / USt.-IdNr.) */
body.dark .impressum strong {
  color: var(--sub-accent);
}

body.dark .company_area {
  border: none;
  background: #0f172a;
}

body.dark .company_title {
  border-bottom-color: #475569;
}

body.dark .company_area h1 {
  color: var(--accent);
}

body.dark .company_content {
  color: hsla(215, 15%, 90%, 0.82);
}

body.dark .content_right {
  border: none;
  background: #0f172a;
}

body.dark .news_title {
  color: var(--accent);
  background-image: none;
}

body.dark .news_event {
  border-bottom-color: #475569;
}

body.dark .news_event_area b {
  color: var(--item-label);
}

body.dark .contact_form strong {
  color: var(--item-label);
}

body.dark .footer_container {
  background-color: #0f172a;
  border-top-color: #334155;
}

body.dark .footer_table td {
  color: #94a3b8;
}

/* one rule for all content links in dark mode */
body.dark a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--link-dot);
  text-underline-offset: 3px;
}

/* header/footer chrome stays clean, exactly like in light mode */
body.dark .header_logo,
body.dark .nav_link,
body.dark #lang_toggle,
body.dark .menu_point {
  text-decoration: none;
}

body.dark a:hover {
  color: var(--link-hover);
}

body.dark strong {
  color: #60a5fa;
}

body.dark h2 {
  color: var(--accent);
}

/* Menu items - blend with page background */
body.dark .menu_point {
  background-image: none;
  background-color: #0f172a;
  color: hsla(215, 15%, 90%, 0.82);
  text-shadow: none;
}

body.dark .menu_point:hover {
  background-image: none;
  background-color: #1e293b;
}

/* Toggle button */
#theme_toggle {
  position: absolute;
  top: 4px;
  right: 32px; /* left of the language toggle */
  z-index: 10;
  display: block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  padding: 0;
  border: none;
  background: transparent;
}

#theme_toggle svg {
  width: 20px;
  height: 20px;
  fill: #64748b;
  stroke: #64748b;
}

body.dark #theme_toggle svg {
  fill: #e2d963;
  stroke: #e2d963;
}

#theme_toggle:hover svg {
  fill: #475569;
}

body.dark #theme_toggle:hover svg {
  fill: #fde047;
}

/* Form elements in dark mode */
body.dark input[type="text"],
body.dark textarea {
  background: #253147;
  color: hsla(215, 15%, 90%, 0.82);
  border-color: #475569;
}

body.dark input[type="text"]:focus,
body.dark textarea:focus {
  border-color: #60a5fa;
  outline: none;
}

body.dark button[type="submit"],
body.dark input[type="reset"] {
  background: #105090;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: inherit;
}

body.dark button[type="submit"] {
  color: #33CC33;
}

body.dark button[type="submit"]:hover,
body.dark input[type="reset"]:hover {
  background: #1460a8;
}

/* Dim images slightly in dark mode */
body.dark img {
  filter: brightness(0.8);
}

/* Sticky header in dark mode */
body.dark #site_header {
  background: #0f172a;
  border-bottom-color: #334155;
}

body.dark .header_logo {
  color: var(--accent);
}

body.dark .nav_link {
  color: hsla(215, 15%, 90%, 0.6);
}

body.dark .nav_link:hover {
  color: #60a5fa;
}

body.dark .nav_link.active {
  color: hsla(215, 15%, 90%, 0.82);
}