/* Dark mode proposal – hand-tuned additions to the generated dark-*.css files (see dark_mode.py).
   Only active with html[data-theme="dark"]: set from the system setting or the header button. */

/* Theme button in the header, outside the main menu. v9: a quiet symbol only. */
html .ui-optimized .ui-theme-toggle {
  display:inline-grid; place-items:center; flex:none; order:5; width:40px; min-width:40px; height:40px; margin:0; padding:0;
  border:0; border-radius:50%; background:transparent; color:inherit; opacity:.7; box-shadow:none; cursor:pointer;
  transition:opacity .15s, background-color .15s;
}
html .ui-optimized .ui-theme-toggle:hover { opacity:1; background:#0000000d; }
html .ui-optimized .ui-theme-toggle:focus-visible { opacity:1; outline:2px solid currentColor; outline-offset:2px; }
html .ui-optimized .ui-theme-toggle svg { display:block; }
.ui-theme-sun, html[data-theme="dark"] .ui-theme-moon { display:none!important; }
html[data-theme="dark"] .ui-theme-sun { display:block!important; }
html[data-theme="dark"] .ui-optimized .ui-theme-toggle { background:transparent; color:inherit; }
html[data-theme="dark"] .ui-optimized .ui-theme-toggle:hover { background:#ffffff14; }

html[data-theme="dark"] { color-scheme:dark; }
/* The logo's black lettering turns light, its green stays green. */
html[data-theme="dark"] img[src*="/images/logo/"] { filter:invert(1) hue-rotate(180deg) brightness(1.1); }
/* Photos slightly toned down so they do not glare on dark surfaces. */
html[data-theme="dark"] main img:not([src*="/images/logo/"]) { filter:brightness(.9); }

/* Highlighted events (shared version-ui/event-kinds.css). */
html[data-theme="dark"] body { --event-tint:#1d3325; --event-ink:#dcefdf; --event-accent:#3fae6a; }
html[data-theme="dark"] body.direction-programm { --event-tint:#3a2a0a; --event-ink:#ffe9a8; --event-accent:#e05aac; }
html[data-theme="dark"] body [data-event-kind="special"] .event-kind-label { background:#146738; border-color:#146738; color:#fff; }
html[data-theme="dark"] body.direction-programm [data-event-kind="special"] .event-kind-label { background:#a92377; border-color:#a92377; }
/* 10: the date keeps its yellow circle, so its number stays dark. */
html[data-theme="dark"] body.direction-programm .date-row[data-event-kind="special"] time b { color:#29242a !important; }
html[data-theme="dark"] body [data-event-kind="internal"] { background:#262626 !important; color:#b5b5b5 !important; box-shadow:inset 4px 0 0 #8a8a8a; }
html[data-theme="dark"] body [data-event-kind="internal"] :is(h2,h3,strong,time,time b,time span,p,small,a,.row-arrow,summary,.event-date) { color:#b5b5b5 !important; }
html[data-theme="dark"] body [data-event-kind="internal"] .event-kind-label { background:#3a3a3a; color:#d0d0d0; }
html[data-theme="dark"] body .event-legend-special { color:#7fd49d; }

/* Dark buttons would vanish on the dark page: they take the action green. */
html[data-theme="dark"] body[data-ui-design="08"],
html[data-theme="dark"] body[data-ui-design="11"] { --ui-cta-bg:#146738; --ui-cta-hover:#1b8048; }
html[data-theme="dark"] body.ui-optimized #navigation a.ui-nav-cta { background:var(--ui-cta-bg); }
html[data-theme="dark"] body.ui-optimized #navigation a.ui-nav-cta:hover { background:var(--ui-cta-hover); }

/* 08: the dark "Alle Termine" button in the poster takes the action green. */
html[data-theme="dark"] .direction-plakat .d-poster-join .d-button { background:#146738; }
html[data-theme="dark"] .direction-plakat .d-poster-join .d-button:hover { background:#1b8048; }

/* Very narrow phones: the button shows only its symbol next to "Menü". */
@media (max-width:380px) {
  /* Logo, "Menü" and the theme button stay in one row. */
  html .ui-optimized .ui-sticky-header { gap:8px; }
  html .ui-optimized .ui-sticky-header :is(.brand, .d-brand) img { width:108px; height:auto; }
  html .ui-optimized .ui-sticky-header .menu-toggle { padding-inline:10px; }
  .ui-theme-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

html[data-theme="dark"] body[data-ui-design="11"] .ui-visit-shortcut a { border-color:#a9d995; background:#1d3325; color:#a9d995; }
html[data-theme="dark"] body[data-ui-design="11"] .ui-visit-shortcut a:hover { background:#a9d995; color:#14201a; }
/* The green warning labels stay as they are in the light theme. */
html[data-theme="dark"] body[data-ui-design="11"] [data-event-kind] :is(.event-room-warning, .event-time-warning) { border:0; background:#146738; color:#fff !important; }