/* Fonts */


foliate-view, .reader-container, #viewer ,iframe , 
html .calibre9 , html p span, html .Bodytext3, 
textarea, html body textarea,html body,html,html body p,html body span,input,div, html body div,  html body   span,  html body   applet,  html body   object,  html body   iframe,  html body   h1,  html body   h2,  html body   h3,  html body   h4,  html body   h5,  html body   h6,  html body   p,  html body   blockquote,  html body   pre,  html body   a,  html body   abbr,  html body   acronym,  html body   address,  html body   big,  html body   cite,  html body   code,  html body   del,  html body   dfn,  html body   em,  html body   img,  html body   ins,  html body   kbd,  html body   q,  html body   s,  html body   samp,  html body   small,  html body   strike,  html body   strong,  html body   sub,  html body   sup,  html body   tt,  html body   var,  html body   b,  html body   u,  html body   i,  html body   center,  html body   dl,  html body   dt,  html body   dd,  html body   ol,  html body   ul,  html body   li,  html body   fieldset,  html body   form,  html body   label,  html body   legend,  html body   table,  html body   caption,  html body   tbody,  html body   tfoot,  html body   thead,  html body   tr,  html body   th,  html body   td,  html body   article,  html body   aside,  html body   canvas,  html body   details,  html body   embed,  html body   figure,  html body   figcaption,  html body   footer,  html body   header,  html body   hgroup,  html body   menu,  html body   nav,  html body   output,  html body   ruby,  html body   section,  html body   summary,  html body   time,  html body   mark,  html body   audio,  html body   video, html #readability-page-1 ,
.pt-mono-regular {
  font-family: "PT Mono", "Aptos Mono" , monospace  !important ; 
}






@font-face {
  font-family: "PT Mono", "Aptos Mono" , monospace  !important ; 
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Mono", "Aptos Mono" , monospace  !important ; 
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
 font-family: "PT Mono", "Aptos Mono" , monospace  !important ; 
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
 font-family: "PT Mono", "Aptos Mono" , monospace  !important ; 
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Custom Properties */
:root {
  --brand: #4a7a3f;
  --brand-light: #5a8f4e;
  --bg: #faf9f7;
  --bg-secondary: #f0eee9;
  --text: #3d4a3f;
  --text-muted: #7a8b7e;
  --border: #d8d4cc;
  --code-bg: #f0eee9;
  --danger: #cc3333;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --max-width: 700px;
}

html.dark {
  --brand: #8fa37a;
  --brand-light: #a0b48c;
  --bg: #1a1b17;
  --bg-secondary: #242421;
  --text: #c8d4ca;
  --text-muted: #7a8b7e;
  --border: #3a3a36;
  --code-bg: #242421;
  --danger: #e06666;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Skip link — first focusable element, hidden until keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--bg);
  color: var(--brand);
  border: 2px solid var(--brand);
  border-radius: 0 0 4px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s, color 0.2s;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5em;
  color: var(--text);
}

h1 { font-size: clamp(1.8rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.7rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.3rem); }

p { margin-bottom: 1em; }

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Main content area */
main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 1rem clamp(1rem, 4vw, 4rem);
}
.site-header .inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 3vw, 3rem);
}
.site-title {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.site-title:hover {
  text-decoration: none;
  opacity: 0.8;
}
.site-logo {
  height: 1.75rem;
  width: auto;
  display: block;
}
.site-logo-dark { display: none; }
html.dark .site-logo-light { display: none; }
html.dark .site-logo-dark { display: block; }
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.75rem);
  flex-wrap: wrap;
}
.site-nav a {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem 0;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--brand);
}
.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lang-toggle, .theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-toggle:hover, .theme-toggle:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.site-footer a {
  color: var(--text-muted);
}
.site-footer a:hover {
  color: var(--brand);
}

/* Post cards */
.post-card {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.post-card:last-child {
  border-bottom: none;
}
.post-card h2 {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  margin-bottom: 0.25rem;
}
.post-card h2 a {
  color: var(--text);
}
.post-card h2 a:hover {
  color: var(--brand);
}
.post-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.post-description {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Link cards (compact log) */
.link-card {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.link-card:last-child {
  border-bottom: none;
}
.link-card-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}
.link-card-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--brand);
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-card-domain {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.link-card-line .tag,
.link-card-line .link-card-notes-toggle {
  flex-shrink: 0;
}
.link-card-details {
  grid-column: 2;
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg-secondary);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.link-card-detail-desc {
  color: var(--text);
}
.link-card-detail-notes {
  color: var(--text);
  white-space: pre-wrap;
}
.link-card-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.link-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.link-card-clock {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.link-card-clock:hover {
  color: var(--brand);
}
.link-card-clock[aria-expanded="true"] {
  color: var(--brand);
}
.link-card-clock .clock-icon {
  display: block;
}
.link-card-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.link-card-date[hidden] {
  display: none;
}
.link-card-notes-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.link-card-notes-toggle:hover {
  color: var(--brand);
}
.link-card-notes-toggle[aria-expanded="true"] {
  color: var(--brand);
}
.link-card-notes-toggle .chevron-icon {
  display: block;
  transition: transform 0.15s ease;
}
.link-card-notes-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

/* Tags */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  text-decoration: none;
}
.tag:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

/* Portfolio cards */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.portfolio-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.portfolio-card img {
  width: 100%;
  height: auto;
  display: block;
}
.portfolio-card-body {
  padding: 1rem;
}
.portfolio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.portfolio-card-head h3 {
  margin-bottom: 0;
}
.portfolio-repo {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.portfolio-repo:hover {
  color: var(--brand);
}
.portfolio-card-body h3 {
  margin-bottom: 0.25rem;
}
.portfolio-card-body h3 a {
  color: var(--text);
}
.portfolio-card-body h3 a:hover {
  color: var(--brand);
}
.portfolio-card-body p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Article/prose content */
.prose h2, .prose h3, .prose h4 {
  margin-top: 1.5em;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1em 0;
}
.prose blockquote {
  border-left: 3px solid var(--brand);
  padding-left: 1rem;
  margin: 1em 0;
  color: var(--text-muted);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.15em 0.3em;
  border-radius: 3px;
}
.prose pre {
  background: var(--code-bg);
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1em 0;
}
.prose pre code {
  background: none;
  padding: 0;
}
.prose ul, .prose ol {
  margin: 1em 0;
  padding-left: 1.5em;
}
.prose li {
  margin-bottom: 0.25em;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: 0.5rem;
  text-align: left;
}
.prose sup a {
  text-decoration: none;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.pagination a, .pagination span {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination span {
  color: var(--text-muted);
  cursor: default;
}

/* Search/filter bar */
.filter-bar {
  margin-bottom: 1.5rem;
}
.filter-bar input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
}
.filter-bar input:focus {
  outline: none;
  border-color: var(--brand);
}
.search-box {
  position: relative;
}
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 14rem;
  overflow-y: auto;
  z-index: 10;
}
.search-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.search-suggestion:hover,
.search-suggestion.is-active {
  background: var(--bg-secondary);
  color: var(--brand);
}
.active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

/* Admin styles */
.admin-header {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
}
.admin-header .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.admin-header h1 {
  font-size: 1.3rem;
}
.admin-nav {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
}
.admin-nav a {
  color: var(--text-muted);
}
.admin-nav a:hover {
  color: var(--brand);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brand);
}
.form-group textarea {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  min-height: 300px;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 500px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}
.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-check input {
  width: auto;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  background: var(--bg);
  color: var(--text);
}
.btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-primary:hover {
  background: var(--brand-light);
  color: #fff;
}
.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger);
  color: #fff;
}
.btn-sm {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  min-height: 36px;
}

/* Admin tables */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.admin-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.admin-table .actions {
  display: flex;
  gap: 0.5rem;
}

/* Login page */
.login-container {
  max-width: 360px;
  margin: 4rem auto;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.login-container h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Preview */
.preview-container {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem;
  margin-top: 1rem;
}

/* Messages */
.msg {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.msg-error {
  background: #ffeaea;
  color: #cc3333;
  border: 1px solid #ffcccc;
}
html.dark .msg-error {
  background: #2a0a0a;
  border-color: #662222;
}
.msg-success {
  background: #eaffea;
  color: #227722;
  border: 1px solid #ccffcc;
}
html.dark .msg-success {
  background: #0a2a0a;
  border-color: #226622;
}

/* Maps */
.maps-intro {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.maps-info {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.maps-info-title {
  font-size: 1.2rem;
  margin-bottom: 0.35em;
}
.maps-info-abstract {
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.maps-info-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.9rem;
}
.maps-info-meta dt {
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.maps-info-meta dd {
  margin: 0;
  word-break: break-word;
}
.maps-info-meta code {
  font-size: 0.85rem;
}
.maps-info-status {
  color: var(--text-muted);
  margin: 0;
}
.maps-info-error {
  color: var(--danger);
}
.maps-map {
  height: 520px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 0;
}
.maps-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.maps-control {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.maps-control:not(:first-child) {
  margin-top: 0.5rem;
}
.maps-select,
.maps-slider {
  width: 100%;
  display: block;
}
.maps-select {
  padding: 0.5rem 0.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.maps-slider {
  accent-color: var(--brand);
  cursor: pointer;
}
.maps-control output {
  color: var(--text);
}

/* Data / Mediathek */
.data-intro {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.data-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
  color: var(--text-muted);
  word-break: break-word;
}
.data-breadcrumb a {
  color: var(--text-muted);
}
.data-breadcrumb a:hover {
  color: var(--brand);
}
.data-breadcrumb-sep {
  margin: 0 0.4rem;
  color: var(--border);
}
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.data-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.15s ease;
}
.data-card:hover {
  border-color: var(--brand);
  text-decoration: none;
}
.data-card-cover {
  width: 100%;
  height: 150px;
  object-fit: contain;
  display: block;
  background: var(--bg-secondary);
}
.data-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  background: var(--bg-secondary);
  color: var(--brand);
}
.data-card-folder .data-card-icon {
  color: var(--text-muted);
}
.data-card-body {
  padding: 0.8rem 0.85rem;
}
.data-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.data-card-title {
  font-size: 0.95rem;
  margin-bottom: 0;
}
.data-card:hover .data-card-title {
  color: var(--brand);
}
.data-card-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
}
.data-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.data-empty {
  color: var(--text-muted);
  margin: 1rem 0;
}

/* Data library — fully-expanded tree view */
.data-tree-root {
  margin-top: 0.5rem;
}
/* nested folders get an indent + a guide line */
.data-tree .data-tree {
  margin-left: 0.6rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.data-tree-folderhead {
  margin: 1.5rem 0 0.5rem;
}
.data-tree-folder-title {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  margin: 0;
}
.data-tree-folder-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0;
}
.data-tree-group {
  margin: 0.75rem 0 1.25rem;
}
.data-tree-grouphead {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.data-tree-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.data-tree-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.data-tree-item-title {
  font-weight: 600;
}
.data-tree-item-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}
.data-tree-item-dl {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  align-self: flex-start;
}
.data-locked {
  font-size: 0.75em;
  margin-left: 0.35rem;
  opacity: 0.7;
}

/* Data — password gate */
.data-gate {
  max-width: 360px;
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.data-gate .msg-error {
  margin-top: 0.75rem;
}
.data-gate form {
  margin-top: 1rem;
}

/* Data — detail / viewer */
.data-detail-desc {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.data-video-wrap {
  margin: 1rem 0 1.5rem;
}
.data-video {
  width: 100%;
  max-height: 70vh;
  display: block;
  background: #000; /* letterbox stays black in both themes on purpose */
  border-radius: 6px;
}
.data-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.data-tab {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 0.5rem 0.25rem;
  margin-bottom: -1px;
  cursor: pointer;
}
.data-tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.data-pane.is-hidden {
  display: none;
}
.data-epub-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.data-epub-status {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.data-epub-viewer {
  width: 100%;
  height: 72vh;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff; /* EPUB pages render on white regardless of theme */
  overflow: hidden;
}
.data-file-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.data-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.data-detail-body {
  margin-top: 2rem;
}

/* Home / landing */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.home-intro {
  margin-bottom: 2.5rem;
}
.home-hero {
  width: min(260px, 70%);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--bg-secondary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 1.5rem;
}
.home-bio {
  font-size: 1.05rem;
  color: var(--text);
  margin: 0;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
.home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.home-tile:hover {
  border-color: var(--brand);
  text-decoration: none;
  transform: translateY(-2px);
}
.home-tile-icon {
  display: inline-flex;
  color: var(--brand);
}
.home-tile-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
}
.home-tile:hover .home-tile-label {
  color: var(--brand);
}
.home-tile-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  html { font-size: 16px; }
  main { padding: 1.5rem 1rem; }
  .maps-map { height: 420px; }
  .data-epub-viewer { height: 60vh; }
  .data-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
  .home-grid { grid-template-columns: repeat(3, 1fr); }
  .site-header .inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-nav {
    width: 100%;
  }
  .admin-table {
    font-size: 0.75rem;
  }
  .admin-table .actions {
    flex-direction: column;
  }
}

/* lieslese accent presets (data-preset on <html>) */
:root[data-preset="weltsein-blau"] { --brand: #3f6a7a; --brand-light: #4e87a0; }
:root[data-preset="weltsein-blau"].dark { --brand: #7fa6b8; --brand-light: #93b8c8; }