/* ==========================================================================
   FARBVARIABLEN / CUSTOM PROPERTIES (GNOME ADWAITA INSPIRED)
   Hier können alle Farben und Radien zentral an einer Stelle gepflegt werden.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Helles Theme (Warmes Papier, sanfte Karten & Ziegelrot-Braun) */
  --bg: #fbf8f5;
  --bg-surface: #f2ece4;
  --bg-hover: #e6ded4;
  --bg-code: #ede5da;
  --text: #2c2420;
  --text-heading: #181210;
  --text-muted: #75675f;
  --text-code: #2c2420;
  --link: #9e4430;
  --link-hover: #bd533c;
  --btn-bg: #9e4430;
  --btn-bg-hover: #b85038;
  --btn-text: #ffffff;
  --border: #dfd4c8;
  --border-focus: #9e4430;
  --shadow: rgba(44, 36, 32, 0.08);

  /* Radien & Typografie (GNOME / Libadwaita Design Language) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --font-ui: system-ui, -apple-system, Cantarell, "Segoe UI", Roboto, sans-serif;
  --font-serif: Lora, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Dunkles Theme (Espresso, sanfte Oberflächen & Kupfer/Terracotta) */
    --bg: #181514;
    --bg-surface: #241f1e;
    --bg-hover: #322b29;
    --bg-code: #201a19;
    --text: #ece5de;
    --text-heading: #fdfaf7;
    --text-muted: #9e9188;
    --text-code: #f0eae4;
    --link: #d97d64;
    --link-hover: #e89982;
    --btn-bg: #c86b52;
    --btn-bg-hover: #d97d64;
    --btn-text: #ffffff;
    --border: #38302d;
    --border-focus: #d97d64;
    --shadow: rgba(0, 0, 0, 0.4);
  }
}

/* ==========================================================================
   GLOBALES STYLING
   ========================================================================== */

/* 1. Grundkörper & Layout */
html {
  background-color: var(--bg);
  color: var(--text);
}

body:not(#pad),
body#collection,
body#post,
body#subpage,
body#me,
body#pad-sub {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Dynamische Wurzel-Farbanpassung wenn im Schreib-Editor umgeschaltet wird */
html:has(body#pad.light) {
  background-color: #fbf8f5 !important;
  color-scheme: light !important;
}

html:has(body#pad.dark) {
  background-color: #181514 !important;
  color-scheme: dark !important;
}

/* 2. Typografie: Überschriften & Fließtext */
h1, h2, h3, h4, h5, h6,
header h1, header h2,
header h1 a, header h2 a,
body#collection #wrapper h2,
body#post article h2#title,
article h2.post-title a,
#official-writing h2.major,
#wrapper h2.major,
.atoms h3 a,
body#pad-sub #posts h3 a {
  color: var(--text-heading) !important;
}

header p.description,
header p.meta-note,
time,
.dt-published,
.post-title time,
footer,
footer nav,
#official-writing h2, #official-writing h3, #official-writing h4,
#wrapper h2, #wrapper h3, #wrapper h4,
.atoms .electron, .atoms date,
body#pad-sub #posts .electron, body#pad-sub #posts date,
#beta p, .content-container p,
.describe, p.explain, p.describe-me,
dl.admin-dl-horizontal dt {
  color: var(--text-muted) !important;
}

/* 3. Links */
a, a:link, a:visited {
  color: var(--link) !important;
}
a:hover {
  color: var(--link-hover) !important;
}
a.subdued, a.hashtag span:first-child {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   GNOME / LIBADWAITA UI KOMPONENTEN
   ========================================================================== */

/* 4. Äußere Trigger-Container immer transparent halten (verhindert eckige & weiße Kanten) */
nav#manage ul,
nav#manage > ul > li,
nav#manage > ul > li:hover,
nav#manage > ul > li.open,
.dropdown-nav ul,
.dropdown-nav > ul > li,
.dropdown-nav > ul > li:hover,
.dropdown-nav > ul > li.open,
body#pad #tools nav ul,
body#pad #tools nav ul li,
body#pad #tools nav ul li:hover,
body#pad #tools nav ul li.open,
body#pad.dark #tools nav ul,
body#pad.dark #tools nav ul li,
body#pad.dark #tools nav ul li:hover,
body#pad.dark #tools nav ul li.open,
body#pad.light #tools nav ul,
body#pad.light #tools nav ul li,
body#pad.light #tools nav ul li:hover,
body#pad.light #tools nav ul li.open,
body#pad-sub #tools nav > ul > li,
body#pad-sub #tools nav > ul > li:hover {
  background: transparent !important;
  border-radius: var(--radius-md) !important;
}

/* 5. Popovers & Dropdown-Menüs (GNOME Popover-Card mit 12px Radius & 6px Padding) */
nav#manage ul ul,
.dropdown-nav ul ul,
body#pad #tools nav ul ul,
body#pad-sub #tools nav ul ul {
  display: none;
  position: absolute;
  top: calc(100% + 6px) !important;
  left: 0;
  background: var(--bg-surface) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  padding: 6px !important;
  min-width: 14rem !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
}

/* Dropdown-Einträge als abgerundete Pills mit sanftem Hover */
nav#manage ul ul li,
.dropdown-nav ul ul li,
body#pad #tools nav ul ul li,
body#pad-sub #tools nav ul ul li {
  display: block !important;
  margin: 2px 0 !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  overflow: hidden !important;
  transition: background 0.15s ease !important;
}

nav#manage ul ul li:hover,
.dropdown-nav ul ul li:hover,
body#pad #tools nav ul ul li:hover,
body#pad-sub #tools nav ul ul li:hover {
  background: var(--bg-hover) !important;
}

nav#manage ul ul a,
.dropdown-nav ul ul a,
body#pad #tools nav ul ul a,
body#pad-sub #tools nav ul ul a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.93rem !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
}

nav#manage ul ul a:hover,
.dropdown-nav ul ul a:hover {
  color: var(--text-heading) !important;
}

/* Trennlinien in Popovers */
nav#manage ul ul hr,
.dropdown-nav ul ul hr,
li.separator hr {
  margin: 6px 8px !important;
  border: none !important;
  height: 1px !important;
  background: var(--border) !important;
}

/* 6. Dropdown Trigger-Buttons */
/* "≡ Menu" Button auf dem Blog */
body#collection nav#manage > ul > li > a,
nav#manage > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px var(--shadow) !important;
  transition: all 0.15s ease !important;
}

body#collection nav#manage > ul > li > a:hover,
body#collection nav#manage > ul > li.open > a,
nav#manage > ul > li:hover > a,
nav#manage > ul > li.open > a {
  background: var(--bg-hover) !important;
  border-color: var(--border-focus) !important;
  color: var(--text-heading) !important;
}

/* "da.nielm.org ▾" Dropdown-Titel im Admin */
header nav#user-nav .dropdown-nav > ul > li > a.title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--link) !important;
  font-family: var(--font-ui) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px var(--shadow) !important;
  transition: all 0.15s ease !important;
}

header nav#user-nav .dropdown-nav > ul > li > a.title:hover,
header nav#user-nav .dropdown-nav > ul > li:hover > a.title,
header nav#user-nav .dropdown-nav > ul > li.open > a.title {
  background: var(--bg-hover) !important;
  border-color: var(--border-focus) !important;
}

header nav#user-nav .dropdown-nav > ul > li > a.title img {
  position: static !important;
  opacity: 0.7 !important;
}

/* 7. GNOME Segmented Tabs (ViewSwitcher-Style für Customize, Stats, etc.) */
header nav#user-nav .tabs {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bg-surface) !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  gap: 3px !important;
  margin-left: 1.5em !important;
  vertical-align: middle !important;
}

header nav#user-nav .tabs > a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  font-family: var(--font-ui) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: all 0.15s ease !important;
}

header nav#user-nav .tabs > a:hover {
  color: var(--text) !important;
  background: var(--bg-hover) !important;
  text-decoration: none !important;
}

header nav#user-nav .tabs > a.selected {
  color: var(--text-heading) !important;
  background: var(--bg) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px var(--shadow) !important;
}

/* 8. Buttons (GNOME Button Design) */
a.btn, button, input[type="submit"], nav#full-nav a.simple-btn, .tool button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  padding: 7px 16px !important;
  font-family: var(--font-ui) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px var(--shadow) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

a.btn:hover, button:hover, nav#full-nav a.simple-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-focus) !important;
  color: var(--text-heading) !important;
}

/* Primäre Aktions-Buttons (CTA / Submit) */
a.btn.cta, a.btn.submit, a.btn[type="submit"],
button.cta, button.submit, button[type="submit"],
input.cta, input.submit, input[type="submit"],
.content-container#pricing button {
  background: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
}

a.btn.cta:hover, a.btn.submit:hover, a.btn[type="submit"]:hover,
button.cta:hover, button.submit:hover, button[type="submit"]:hover,
input.cta:hover, input.submit:hover, input[type="submit"]:hover,
.content-container#pricing button:hover {
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
}

.btn.pager, .pager a {
  border-radius: var(--radius-md) !important;
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.btn.pager:hover, .pager a:hover {
  background: var(--bg-hover) !important;
  color: var(--link) !important;
}
.pager a.selected {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-bg) !important;
}

/* 9. Formularfelder (GNOME Entry-Style - NUR Formulare, niemals der Editor auf body#pad!) */
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="tel"],
input.boxy,
input.underline,
select,
select.inputform,
textarea.section,
textarea.inputform,
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="email"],
#collection-options input[type="text"],
#collection-options textarea {
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  background-color: var(--bg-surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.95rem !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

form input:focus,
select:focus,
textarea.section:focus,
#collection-options input:focus,
#collection-options textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(217, 125, 100, 0.25) !important;
  outline: none !important;
}

/* 10. Checkboxen & Radio-Buttons (Moderne GNOME Controls) */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 0.55em 0 0 !important;
  vertical-align: middle !important;
  background-color: var(--bg-surface) !important;
  border: 1.5px solid var(--border) !important;
  cursor: pointer !important;
  display: inline-grid !important;
  place-content: center !important;
  transition: all 0.15s ease-in-out !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

input[type="checkbox"] {
  border-radius: 5px !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--link) !important;
  background-color: var(--bg-hover) !important;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--link) !important;
  outline-offset: 2px !important;
}

/* Checkbox Aktiv / Ausgewählt */
input[type="checkbox"]:checked {
  background-color: var(--link) !important;
  border-color: var(--link) !important;
}

input[type="checkbox"]:checked::before {
  content: "" !important;
  width: 0.65rem !important;
  height: 0.65rem !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
  background-color: #ffffff !important;
}

/* Radio Button Aktiv / Ausgewählt */
input[type="radio"]:checked {
  background-color: var(--bg-surface) !important;
  border-color: var(--link) !important;
}

input[type="radio"]:checked::before {
  content: "" !important;
  width: 0.55rem !important;
  height: 0.55rem !important;
  border-radius: 50% !important;
  background-color: var(--link) !important;
}

/* Deaktivierte Controls */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background-color: var(--bg-hover) !important;
  border-color: var(--border) !important;
}

/* Label-Ausrichtung */
#collection-options .option label {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-ui) !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.25em !important;
}

/* 11. Code-Editor (Ace Editor Zeilen & Gutter) */
.ace_editor,
.ace_editor.ace-chrome {
  background-color: var(--bg-code) !important;
  color: var(--text-code) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px 3px var(--shadow) !important;
}

.ace_editor .ace_gutter,
.ace_editor.ace-chrome .ace_gutter,
.ace_editor .ace_gutter-layer,
.ace_editor.ace-chrome .ace_gutter-layer {
  background-color: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-right: 1px solid var(--border) !important;
}

.ace_editor .ace_gutter-cell,
.ace_editor.ace-chrome .ace_gutter-cell {
  color: var(--text-muted) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.ace_editor .ace_gutter-active-line,
.ace_editor.ace-chrome .ace_gutter-active-line {
  background-color: var(--bg-hover) !important;
  color: var(--link) !important;
}

.ace_editor .ace_scroller,
.ace_editor.ace-chrome .ace_scroller {
  background-color: var(--bg-code) !important;
}

.ace_editor .ace_active-line,
.ace_editor.ace-chrome .ace_active-line {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.ace_editor .ace_cursor,
.ace_editor.ace-chrome .ace_cursor {
  border-left: 2px solid var(--link) !important;
}

.ace_editor .ace_selection,
.ace_editor.ace-chrome .ace_selection {
  background-color: rgba(217, 125, 100, 0.25) !important;
}

.ace_editor .ace_keyword,
.ace_editor.ace-chrome .ace_keyword,
.ace_editor .ace_storage,
.ace_editor.ace-chrome .ace_storage {
  color: var(--link) !important;
  font-weight: 600 !important;
}

.ace_editor .ace_string,
.ace_editor.ace-chrome .ace_string {
  color: #a8b878 !important;
}

.ace_editor .ace_comment,
.ace_editor.ace-chrome .ace_comment {
  color: var(--text-muted) !important;
  font-style: italic !important;
}

/* 12. Schreib-Editor (body#pad) - Volle Unterstützung für Light & Dark Mode */
body#pad {
  min-height: 100vh !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

/* --- LIGHT MODE (wenn im Editor das helle Design aktiviert wird) --- */
body#pad.light {
  color-scheme: light !important;
  background-color: #fbf8f5 !important;
  color: #2c2420 !important;
}

body#pad.light #editor {
  background-color: #fbf8f5 !important;
  color: #2c2420 !important;
}

body#pad.light #title,
body#pad.light textarea,
body#pad.classic.light #title,
body#pad.classic.light textarea {
  background-color: #fbf8f5 !important;
  color: #2c2420 !important;
}

body#pad.light #title::placeholder,
body#pad.light textarea::placeholder {
  color: #a89f91 !important;
}

/* Toolbar Buttons & Dropdown-Trigger Basis (GNOME Libadwaita Headerbar Buttons) */
body#pad #tools #publish-to,
body#pad #tools nav#target > ul > li > a,
body#pad #tools nav#font-picker > ul > li > a,
body#pad #tools .tool a,
body#pad #tools #belt a,
body#pad #tools h1#user-title a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: var(--radius-md) !important; /* 8px abgerundete Ecken */
  padding: 4px 10px !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

body#pad #tools #publish-to img,
body#pad #tools nav#target img,
body#pad #tools nav#font-picker img {
  vertical-align: middle !important;
  margin: 0 !important;
}

body#pad #tools nav ul li.menu-heading {
  color: var(--text-muted) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 8px 12px 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: transparent !important;
}

body#pad.light #tools {
  background-color: transparent !important;
}

body#pad.light #tools h1 a,
body#pad.light #tools #belt a,
body#pad.light #tools #belt button,
body#pad.light #tools #publish-to,
body#pad.light #tools nav > ul > li > a {
  color: #2c2420 !important;
  background-color: transparent !important;
}

body#pad.light #tools #publish-to:hover,
body#pad.light #tools nav > ul > li > a:hover,
body#pad.light #tools .tool a:hover,
body#pad.light #tools #belt a:hover,
body#pad.light #tools h1#user-title a:hover {
  background-color: var(--bg-hover) !important;
  color: #181210 !important;
  border-radius: var(--radius-md) !important;
}

body#pad.light #tools nav#target > ul > li.open > a,
body#pad.light #tools nav#target > ul > li.open > a#publish-to,
body#pad.light #tools nav#font-picker > ul > li.open > a,
body#pad.light #tools #publish-to:active,
body#pad.light #tools #publish-to[aria-expanded="true"] {
  background-color: var(--bg-hover) !important;
  color: #181210 !important;
  border-radius: var(--radius-md) !important;
}

body#pad.light #tools .tool#status,
body#pad.light #tools .hidden#wc {
  color: #75675f !important;
}

body#pad.light #tools nav ul ul {
  background: #f2ece4 !important;
  border-color: #dfd4c8 !important;
  box-shadow: 0 10px 30px rgba(44, 36, 32, 0.12) !important;
}

body#pad.light #tools nav ul ul a {
  color: #2c2420 !important;
}

body#pad.light #tools nav ul ul a:hover {
  color: #181210 !important;
}

body#pad.light #tools nav ul ul li:hover {
  background: #e6ded4 !important;
}

body#pad.light #tools nav ul ul li.selected a {
  color: #9e4430 !important;
  font-weight: bold !important;
}

body#pad.light #tools nav ul ul hr {
  background: #dfd4c8 !important;
}

body#pad.light .modal {
  background: #ffffff !important;
  border: 1px solid #dfd4c8 !important;
  box-shadow: 0 16px 40px rgba(44, 36, 32, 0.2) !important;
}

body#pad.light .modal h2 {
  color: #181210 !important;
}

body#pad.light .modal,
body#pad.light .modal .e-content,
body#pad.light .modal p {
  color: #2c2420 !important;
}

body#pad.light .modal input[type="email"],
body#pad.light .modal input[type="password"],
body#pad.light .modal input[type="text"] {
  background: #fbf8f5 !important;
  color: #2c2420 !important;
  border-color: #dfd4c8 !important;
}

body#pad.light .modal .form-hint {
  color: #75675f !important;
}

/* --- DARK MODE (wenn im Editor das dunkle Design aktiviert wird) --- */
body#pad.dark {
  color-scheme: dark !important;
  background-color: #181514 !important;
  color: #ece5de !important;
}

body#pad.dark #editor {
  background-color: #181514 !important;
  color: #ece5de !important;
}

body#pad.dark #title,
body#pad.dark textarea,
body#pad.classic.dark #title,
body#pad.classic.dark textarea {
  background-color: #181514 !important;
  color: #ece5de !important;
}

body#pad.dark #title::placeholder,
body#pad.dark textarea::placeholder {
  color: #6d625d !important;
}

body#pad.dark #tools {
  background-color: transparent !important;
}

body#pad.dark #tools h1 a,
body#pad.dark #tools #belt a,
body#pad.dark #tools #belt button,
body#pad.dark #tools #publish-to,
body#pad.dark #tools nav > ul > li > a {
  color: #ece5de !important;
  background-color: transparent !important;
}

body#pad.dark #tools #publish-to:hover,
body#pad.dark #tools nav > ul > li > a:hover,
body#pad.dark #tools .tool a:hover,
body#pad.dark #tools #belt a:hover,
body#pad.dark #tools h1#user-title a:hover {
  background-color: var(--bg-hover) !important;
  color: #fdfaf7 !important;
  border-radius: var(--radius-md) !important;
}

body#pad.dark #tools nav#target > ul > li.open > a,
body#pad.dark #tools nav#target > ul > li.open > a#publish-to,
body#pad.dark #tools nav#font-picker > ul > li.open > a,
body#pad.dark #tools #publish-to:active,
body#pad.dark #tools #publish-to[aria-expanded="true"] {
  background-color: var(--bg-hover) !important;
  color: #fdfaf7 !important;
  border-radius: var(--radius-md) !important;
}

body#pad.dark #tools .tool#status,
body#pad.dark #tools .hidden#wc {
  color: #9e9188 !important;
}

body#pad.dark #tools nav ul ul {
  background: #241f1e !important;
  border-color: #38302d !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body#pad.dark #tools nav ul ul a {
  color: #ece5de !important;
}

body#pad.dark #tools nav ul ul a:hover {
  color: #fdfaf7 !important;
}

body#pad.dark #tools nav ul ul li:hover {
  background: #322b29 !important;
}

body#pad.dark #tools nav ul ul li.selected a {
  color: #d97d64 !important;
  font-weight: bold !important;
}

body#pad.dark #tools nav ul ul hr {
  background: #38302d !important;
}

body#pad.dark .modal {
  background: #241f1e !important;
  border: 1px solid #38302d !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

body#pad.dark .modal h2 {
  color: #fdfaf7 !important;
}

body#pad.dark .modal,
body#pad.dark .modal .e-content,
body#pad.dark .modal p {
  color: #ece5de !important;
}

body#pad.dark .modal input[type="email"],
body#pad.dark .modal input[type="password"],
body#pad.dark .modal input[type="text"] {
  background: #181514 !important;
  color: #ece5de !important;
  border-color: #38302d !important;
}

body#pad.dark .modal .form-hint {
  color: #9e9188 !important;
}

/* Fallback falls weder .light noch .dark explizit gesetzt ist */
body#pad:not(.light):not(.dark),
body#pad:not(.light):not(.dark) #editor,
body#pad:not(.light):not(.dark) #title,
body#pad:not(.light):not(.dark) textarea {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Allgemeine Textarea- & Title-Eigenschaften */
body#pad #title,
body#pad textarea,
body#pad.classic #title,
body#pad.classic textarea {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-serif) !important;
  font-size: 1.25em !important;
  letter-spacing: .6px !important;
  line-height: 1.6 !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

body#pad textarea:focus,
body#pad #title:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Responsive Zentrierung der Schreibfläche */
@media all and (min-width: 50em) {
  body#pad #title, body#pad textarea, body#pad.classic #title, body#pad.classic textarea {
    padding-left: 10% !important; padding-right: 10% !important;
  }
}
@media all and (min-width: 60em) {
  body#pad #title, body#pad textarea, body#pad.classic #title, body#pad.classic textarea {
    padding-left: 15% !important; padding-right: 15% !important;
  }
}
@media all and (min-width: 70em) {
  body#pad #title, body#pad textarea, body#pad.classic #title, body#pad.classic textarea {
    padding-left: 20% !important; padding-right: 20% !important;
  }
}
@media all and (min-width: 85em) {
  body#pad #title, body#pad textarea, body#pad.classic #title, body#pad.classic textarea {
    padding-left: 25% !important; padding-right: 25% !important;
  }
}
@media all and (min-width: 105em) {
  body#pad #title, body#pad textarea, body#pad.classic #title, body#pad.classic textarea {
    padding-left: 30% !important; padding-right: 30% !important;
  }
}

/* 13. Tabellen & Karten (GNOME ListBox / Card Style) */
table.classy {
  width: 100% !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  margin: 1em 0 2em !important;
  box-shadow: 0 2px 8px var(--shadow) !important;
}

table.classy th {
  background: var(--bg-hover) !important;
  padding: 10px 16px !important;
  font-family: var(--font-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
}

table.classy td {
  padding: 12px 16px !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
}

table.classy tr:first-child td {
  border-top: none !important;
}

table.classy td a {
  font-weight: 500 !important;
}

/* 14. Modals & Dialoge */
.modal {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 24px !important;
}
.modal h2 {
  color: var(--text-heading) !important;
  font-family: var(--font-ui) !important;
}
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="text"] {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.modal .form-hint {
  color: var(--text-muted) !important;
}

/* 15. Code-Blöcke & Zitate */
code, pre, pre.code-block,
body#collection code, body#post code, body#subpage code,
body#collection pre, body#post pre, body#subpage pre {
  background-color: var(--bg-code) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-code) !important;
}

blockquote,
body#collection blockquote,
body#post blockquote,
body#subpage blockquote {
  border-left: 4px solid var(--link) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  background: var(--bg-surface) !important;
  padding: 0.8em 1.2em !important;
  margin: 1em 0 !important;
  color: var(--text-muted) !important;
}

/* 16. Footer */
body footer,
body footer nav a:link,
body footer nav a:visited,
body footer ul a:link,
body footer ul a:visited {
  color: var(--text-muted) !important;
}
body footer a.home:link,
body footer a.home:visited {
  color: var(--text-heading) !important;
}
body footer a.home:hover,
body footer nav a:hover {
  color: var(--link-hover) !important;
}
hr {
  background: var(--border) !important;
  border-color: var(--border) !important;
}