/* Ngosu Docs: BookStack im Stil von tools.ngosu-corp.de (deploy/bookstack/theme/ngosu) */
@font-face { font-family: "Plex"; src: url("/theme/ngosu/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/theme/ngosu/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/theme/ngosu/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --font-body: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ng-bg: #F5F6F8;
  --ng-surface: #FFFFFF;
  --ng-surface-2: #F1F3F6;
  --ng-text: #111827;
  --ng-dim: #4B5563;
  --ng-line: #E2E6EB;
  --ng-r: 6px;
}
:root.dark-mode {
  --ng-bg: #0F141A;
  --ng-surface: #161C24;
  --ng-surface-2: #1E2630;
  --ng-text: #E5E9EF;
  --ng-dim: #9AA4B2;
  --ng-line: #2A3340;
}

html, html.dark-mode { background-color: var(--ng-bg); }
body { color: var(--ng-text); }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }

/* Kopfzeile wie in der toolbox: hell, Linie statt Schatten */
header#header {
  background: var(--ng-surface) !important;
  color: var(--ng-text);
  border-bottom: 1px solid var(--ng-line);
  box-shadow: none;
}
header#header .links a, header#header .user-name, header#header .logo-text, header#header .mobile-menu-toggle { color: var(--ng-text); }
header#header .links a:hover, header#header .user-name:hover, header#header .logo:hover {
  background-color: var(--ng-surface-2); color: var(--ng-text);
}
header#header .header *, header#header * { outline-color: var(--color-primary); }
header#header .logo-image { height: 36px; width: 36px; border-radius: 50%; }
header#header .logo-text { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
header#header .search-box input {
  background-color: var(--ng-bg); border: 1px solid var(--ng-line); color: var(--ng-text); border-radius: var(--ng-r);
}
header#header .search-box input:focus { border-color: var(--color-primary); }
header#header .search-box input::placeholder { color: var(--ng-dim); opacity: 1; }
header#header #header-search-box-button { color: var(--ng-dim); opacity: 1; }

/* Links zu den anderen Ngosu-Diensten */
.ng-services { display: inline-flex; align-items: center; margin-inline-end: 6px; padding-inline-end: 10px; border-inline-end: 1px solid var(--ng-line); }
header#header .links a.ng-ext { color: var(--ng-dim); }
header#header .links a.ng-ext:hover { color: var(--ng-text); }
@media (max-width: 1000px) {
  .ng-services { display: flex; flex-direction: column; align-items: stretch; border: 0; border-bottom: 1px solid var(--ng-line); margin: 0 0 6px; padding: 0 0 6px; }
}

/* Flaechen: Linien statt Schatten, einheitliche Radien */
html .card, html.dark-mode .card { border-radius: var(--ng-r); box-shadow: none; border: 1px solid var(--ng-line); background-color: var(--ng-surface); }
html .grid-card, html.dark-mode .grid-card { border-radius: var(--ng-r); border-color: var(--ng-line); background-color: var(--ng-surface); color: var(--ng-text); }
html .grid-card:hover, html.dark-mode .grid-card:hover { color: var(--ng-text); box-shadow: none; border-color: var(--ng-dim); }
.grid-card p { font-size: .8rem; }
.button, button.button, .button.outline, input, select, textarea, .dropdown-menu { border-radius: var(--ng-r); }
.button { box-shadow: none; font-weight: 500; }
.text-muted { color: var(--ng-dim) !important; }

/* Titelbilder ohne Bild: schmaler Streifen statt grosser Farbflaeche */
.featured-image-container-wrap:not(:has(.featured-image-container[style])) { height: 56px !important; }

/* Seiteninhalt: ruhiger Lesetext */
.page-content { line-height: 1.65; }
.page-content code, .page-content pre { border-radius: 4px; }
.page-content pre { border: 1px solid var(--ng-line); }

/* Footer-Links */
footer { border-top: 1px solid var(--ng-line); }
footer a { color: var(--ng-dim); }
.featured-image-container-wrap.bg-bookshelf:not(:has(.featured-image-container[style])) { background: color-mix(in srgb, var(--color-bookshelf) 12%, var(--ng-surface)) !important; }
.featured-image-container-wrap.bg-book:not(:has(.featured-image-container[style])) { background: color-mix(in srgb, var(--color-book) 12%, var(--ng-surface)) !important; }
.featured-image-container-wrap.bg-bookshelf:not(:has(.featured-image-container[style])) svg { fill: var(--color-bookshelf); }
.featured-image-container-wrap.bg-book:not(:has(.featured-image-container[style])) svg { fill: var(--color-book); }
.featured-image-container-wrap:not(:has(.featured-image-container[style])) { border-bottom: 1px solid var(--ng-line); }
header#header .mobile-menu-toggle { border-color: var(--ng-line); }