/*!
 * BookStack Theme – Christuskirche Gauting
 * Identische Formen/Schriften in Dark- und Light-Mode, nur Farb-Tokens
 * wechseln. Variablen werden in :root (Light) und html.dark-mode (Dark)
 * gesetzt; alle Style-Regeln nutzen die Variablen und gelten in beiden Modi.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* ======================================================================
   1. Token-System – Light Mode (Default)
   ====================================================================== */
:root {
  color-scheme: light;

  /* Schriftarten (Light + Dark identisch) */
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-code:    ui-monospace, 'Fira Code', 'Menlo', monospace;

  /* Akzentfarben – Ice Blue */
  --cck-blue-1: #4a8fb5;
  --cck-blue-2: #2c6d94;
  --cck-blue-3: #1d4f6e;
  --cck-gold-1: #b78f3a;

  /* BookStack-eigene Variablen */
  --color-primary:       #2c6d94;
  --color-primary-light: rgba(91, 164, 207, 0.15);
  --color-link:          #2c6d94;
  --color-link-hover:    #1d4f6e;
  --color-bookshelf:     #2c6d94;
  --color-book:          #4a8fb5;
  --color-chapter:       #3a7a9e;
  --color-page:          #2a6587;
  --color-page-draft:    #b78f3a;
  --color-positive:      #2f7d4d;
  --color-negative:      #b54a4a;
  --color-warning:       #b78f3a;

  /* Light Mode Hintergründe und Schrift */
  --cck-bg-0: #f4f6fa;
  --cck-bg-1: #ffffff;
  --cck-bg-2: #eef2f8;
  --cck-bg-3: #dde4ee;
  --cck-bg-4: #c5cfe0;
  --cck-fg-0: #1a1f2e;
  --cck-fg-1: #3d4658;
  --cck-fg-2: #6b7385;
  --cck-fg-3: #9aa3b5;

  /* Glas-Effekt (Light) */
  --cck-glass-bg: rgba(255, 255, 255, 0.55);
  --cck-glass-bd: rgba(15, 17, 22, 0.10);
  --cck-glass-blur: blur(24px) saturate(160%);

  /* Sonstiges */
  --cck-radius:    14px;
  --cck-radius-sm: 10px;
  --cck-shadow-card:  0 20px 40px -25px rgba(15, 17, 22, 0.18);
  --cck-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.7),
                      inset 0 -1px 0 rgba(15, 17, 22, 0.06);
  --cck-radial-1: rgba(91, 164, 207, 0.10);
  --cck-radial-2: rgba(183, 143, 58, 0.06);

  /* Eingabefeld-Hintergrund */
  --cck-input-bg: rgba(255, 255, 255, 0.85);
}

/* ======================================================================
   1b. Token-System – Dark Mode Overrides
   ====================================================================== */
html.dark-mode {
  color-scheme: dark;

  --cck-blue-1: #5ba4cf;
  --cck-blue-2: #8cc1e1;
  --cck-blue-3: #2c6d94;
  --cck-gold-1: #d6b56b;

  --color-primary:       #5ba4cf;
  --color-link:          #8cc1e1;
  --color-link-hover:    #b6d7ea;
  --color-bookshelf:     #5ba4cf;
  --color-book:          #4a8fb5;
  --color-chapter:       #3a7a9e;
  --color-page:          #2a6587;
  --color-positive:      #6abf8a;
  --color-negative:      #e57373;
  --color-warning:       #d6b56b;

  --cck-bg-0: #0f1116;
  --cck-bg-1: #161922;
  --cck-bg-2: #1d2230;
  --cck-bg-3: #262c3d;
  --cck-bg-4: #2f3649;
  --cck-fg-0: #f1f3f8;
  --cck-fg-1: #c7ccd9;
  --cck-fg-2: #8a91a3;
  --cck-fg-3: #5b6172;

  --cck-glass-bg: rgba(255, 255, 255, 0.035);
  --cck-glass-bd: rgba(255, 255, 255, 0.08);
  --cck-glass-blur: blur(28px) saturate(180%);

  --cck-shadow-card:  0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --cck-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                      inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --cck-radial-1: rgba(91, 164, 207, 0.08);
  --cck-radial-2: rgba(214, 181, 107, 0.05);

  --cck-input-bg: rgba(0, 0, 0, 0.3);
}

/* ======================================================================
   2. Globale Grundlagen
   ====================================================================== */
html,
body {
  background: var(--cck-bg-0) !important;
  color: var(--cck-fg-0);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

body {
  background:
    radial-gradient(1400px 800px at 80% -10%, var(--cck-radial-1), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, var(--cck-radial-2), transparent 60%),
    var(--cck-bg-0) !important;
  background-attachment: fixed;
}

#content,
.page-content {
  color: var(--cck-fg-0);
  font-family: var(--font-body);
}

.page-content,
.page-content p,
.page-content li,
.page-content blockquote {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.header,
.page-content > h1,
.page-content > h2,
.page-content > h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cck-fg-0);
}

/* ======================================================================
   3. Topbar / Header (in beiden Modi mit Backdrop-Blur)
   ====================================================================== */
header.grid,
header#header,
header {
  background: var(--cck-bg-1) !important;
  border-bottom: 1px solid var(--cck-glass-bd);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

header .header-links a,
header .links a,
header a {
  color: var(--cck-fg-1) !important;
  transition: color 200ms ease;
}
header a:hover {
  color: var(--cck-blue-2) !important;
}

header input[type="search"],
header input[name="term"],
header .header-search input,
#header-search-box-input {
  background-color: var(--cck-input-bg) !important;
  border: 1px solid var(--cck-glass-bd) !important;
  color: var(--cck-fg-0) !important;
  border-radius: var(--cck-radius-sm) !important;
}
header input::placeholder,
header input::-webkit-input-placeholder,
#header-search-box-input::placeholder {
  color: var(--cck-fg-3) !important;
  opacity: 1;
}
/* Such-Button-Icon im Header */
#header-search-box-button .svg-icon,
header .search-box button .svg-icon {
  fill: var(--cck-fg-2);
}

/* ======================================================================
   4. Karten (in beiden Modi mit Glas-Effekt)
   ====================================================================== */
.card,
.sidebar .card,
.tri-layout-sides .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
    var(--cck-glass-bg);
  backdrop-filter: var(--cck-glass-blur);
  -webkit-backdrop-filter: var(--cck-glass-blur);
  border: 1px solid var(--cck-glass-bd);
  border-radius: var(--cck-radius);
  box-shadow:
    var(--cck-shadow-inner),
    var(--cck-shadow-card);
  position: relative;
}

/* Akzent-Highlight oben (subtil in beiden Modi) */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cck-glass-bd), transparent);
  pointer-events: none;
}
html.dark-mode .card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}

.card-title,
.card h2,
.card h3,
.card .card-title-link {
  color: var(--cck-fg-0);
  font-family: var(--font-heading);
  font-weight: 600;
}

/* ======================================================================
   5. Entity-Listings (Bücher, Kapitel, Seiten)
   ====================================================================== */
.grid-card,
.book-grid-item,
.entity-list-item {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 60%),
    var(--cck-glass-bg);
  backdrop-filter: var(--cck-glass-blur);
  border: 1px solid var(--cck-glass-bd);
  border-radius: var(--cck-radius) !important;
  overflow: hidden; /* Bilder/Inhalt zur Rundung gecroppt */
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms ease,
              box-shadow 240ms ease;
  will-change: transform;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari overflow+radius Fix */
}
.grid-card:hover,
.book-grid-item:hover,
.entity-list-item:hover {
  transform: translateY(-2px);
  border-color: var(--cck-blue-1) !important;
  border-radius: var(--cck-radius) !important;
  box-shadow: var(--cck-shadow-card);
}

/* Cover-Bilder in Grid-Cards: oben durch Parent-Overflow gerundet,
   unten gerade abschließen (kein eigener Border-Radius) */
.featured-image-container,
.featured-image-container-wrap {
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent;
  /* Bild übernimmt die Hintergrundfarbe der bg-{type}-Klasse */
}
.grid-card .featured-image-container-wrap {
  border-radius: var(--cck-radius) var(--cck-radius) 0 0 !important; /* nur oben */
  overflow: hidden;
}
.grid-card img,
.book-grid-item img,
.entity-list-item img {
  border-radius: 0;
  display: block;
  max-width: 100%;
}

/* List-Item-Image (linke Kachel im List-View): Parent croppt */
.entity-list-item .entity-list-item-image {
  border-radius: 0 !important;
}

.entity-list-item .entity-list-item-name {
  color: var(--cck-fg-0);
}
.entity-list-item p {
  color: var(--cck-fg-2);
}

/* Inner-Cards in Grid-Items neutralisieren */
.grid-card .card,
.book-grid-item .card,
.entity-list-item .card {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ======================================================================
   5b. Buch-/Kapitel-Inhaltsliste – Bars und Abstände
   Markup: .book-contents > .entity-list-item (Kapitel/Seite)
           .book-contents > .chapter-expansion (mit Seiten innendrin)
   ====================================================================== */

/* Abstand zwischen Buch-Inhalts-Items (Kapitel, Seiten, Expansions) */
.book-contents > .entity-list-item,
.book-contents > .chapter-expansion {
  margin-bottom: 12px;
  border-radius: var(--cck-radius-sm) !important;
}
.book-contents > .entity-list-item:last-child,
.book-contents > .chapter-expansion:last-child {
  margin-bottom: 0;
}
/* Kapitel direkt vor seiner Expansion → kein Abstand dazwischen */
.book-contents > .entity-list-item:has(+ .chapter-expansion),
.book-contents > .entity-list-item.chapter.has-children {
  margin-bottom: 0;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.book-contents > .entity-list-item.chapter.has-children + .chapter-expansion {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none;
}

/* Bars (das 4px-Element ganz links) – einheitlich grau,
   unabhängig von text-chapter/text-page/text-book */
.book-contents .entity-list-item > .icon,
.book-contents .chapter-expansion > .icon {
  color: var(--cck-fg-3) !important;
  fill: var(--cck-fg-3) !important;
  background-color: var(--cck-fg-3) !important;
  opacity: 0.6;
}

/* Page-Titel: deutlicher in Ice Blue */
.book-contents .entity-list-item.page .entity-list-item-name,
.book-contents .entity-list-item-children .entity-list-item.page .entity-list-item-name {
  color: var(--cck-blue-2) !important;
}
/* Chapter-Titel: bleibt heller Vordergrund */
.book-contents .entity-list-item.chapter .entity-list-item-name {
  color: var(--cck-fg-0);
}

/* Chapter-Expansion: dezenter Container für die Seitenliste innen */
.book-contents .chapter-expansion {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--cck-glass-bd);
}
html:not(.dark-mode) .book-contents .chapter-expansion {
  background: rgba(0, 0, 0, 0.02);
}

/* Innere Seiten-Liste etwas einrücken und gleichen Abstand erzeugen */
.book-contents .entity-list-item-children > div {
  padding: 4px 0;
}
.book-contents .entity-list-item-children .entity-list-item {
  margin-bottom: 6px;
  border-radius: var(--cck-radius-sm) !important;
}

/* ======================================================================
   6. Buttons
   ====================================================================== */
.button,
button.button,
a.button,
input[type="submit"].button {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--cck-radius-sm);
  padding: 10px 20px;
  letter-spacing: 0.01em;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.button.primary,
button.button.primary,
.button[type="submit"]:not(.outline) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
    rgba(91, 164, 207, 0.18) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(91, 164, 207, 0.45) !important;
  color: var(--cck-blue-2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 20px -10px rgba(91, 164, 207, 0.30);
  position: relative;
  overflow: hidden;
}
html.dark-mode .button.primary,
html.dark-mode button.button.primary,
html.dark-mode .button[type="submit"]:not(.outline) {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%),
    rgba(91, 164, 207, 0.22) !important;
}
.button.primary::before,
button.button.primary::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}
.button.primary:hover,
button.button.primary:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
    rgba(91, 164, 207, 0.28) !important;
  border-color: rgba(91, 164, 207, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px -12px rgba(91, 164, 207, 0.40);
}

.button.outline,
a.button.outline {
  background: var(--cck-glass-bg) !important;
  backdrop-filter: var(--cck-glass-blur);
  border: 1px solid var(--cck-glass-bd) !important;
  color: var(--cck-fg-1) !important;
}
.button.outline:hover {
  background: var(--cck-bg-2) !important;
  color: var(--cck-fg-0) !important;
  border-color: var(--cck-blue-1) !important;
}

/* ======================================================================
   7. Formulare
   ====================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  background: var(--cck-input-bg);
  border: 1px solid var(--cck-glass-bd);
  color: var(--cck-fg-0);
  border-radius: var(--cck-radius-sm);
  font-family: var(--font-body);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cck-blue-1);
  background: var(--cck-bg-1);
  box-shadow: 0 0 0 3px rgba(91, 164, 207, 0.18);
}

label,
.setting-list-label {
  color: var(--cck-fg-1);
}

/* Native Select-Optionen (Browser-Default) */
select option,
select optgroup,
datalist option {
  background: var(--cck-bg-1) !important;
  color: var(--cck-fg-0) !important;
}

/* ======================================================================
   8. Tags, Badges, Labels
   ====================================================================== */
.tag {
  background: var(--cck-bg-2);
  border: 1px solid var(--cck-glass-bd);
  color: var(--cck-fg-1);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.82rem;
}
.label {
  border-radius: 999px;
  font-weight: 500;
  padding: 3px 10px;
}
.label-success { background: rgba(47, 125, 77, 0.15); color: var(--color-positive); }
.label-danger  { background: rgba(181, 74, 74, 0.15); color: var(--color-negative); }
.label-warning { background: rgba(183, 143, 58, 0.15); color: var(--color-warning); }

/* ======================================================================
   9. Tabellen
   ====================================================================== */
table {
  border-color: var(--cck-glass-bd);
}
th {
  color: var(--cck-fg-2);
  font-weight: 500;
  border-bottom: 1px solid var(--cck-glass-bd);
  background: transparent;
}
td {
  border-bottom: 1px solid var(--cck-glass-bd);
}

/* ======================================================================
   10. Links, Code, Sonstiges
   ====================================================================== */
a {
  color: var(--cck-blue-2);
}
a:hover {
  color: var(--cck-blue-1);
}

code,
.page-content code {
  background: var(--cck-bg-2);
  border: 1px solid var(--cck-glass-bd);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: var(--font-code);
  font-size: 0.88em;
  color: var(--cck-fg-1);
}
pre {
  background: var(--cck-bg-2);
  border: 1px solid var(--cck-glass-bd);
  border-radius: var(--cck-radius-sm);
}
blockquote {
  border-left: 3px solid var(--cck-blue-1);
  background: var(--cck-bg-2);
  border-radius: 0 var(--cck-radius-sm) var(--cck-radius-sm) 0;
  padding: 12px 18px;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  color: var(--cck-fg-1);
}
hr {
  border: none;
  border-top: 1px solid var(--cck-glass-bd);
}

/* ======================================================================
   11. Editor (WYSIWYG / Markdown)
   ====================================================================== */
.editor-toolbar,
.tox-toolbar,
.tox-menubar,
.tox-statusbar {
  background: var(--cck-bg-1) !important;
  border-color: var(--cck-glass-bd) !important;
}
.tox-tinymce {
  border: 1px solid var(--cck-glass-bd) !important;
  border-radius: var(--cck-radius-sm) !important;
}
.markdown-editor-wrap textarea {
  background: var(--cck-bg-2);
  color: var(--cck-fg-0);
  font-family: var(--font-code);
}

/* ======================================================================
   12. Modals, Popovers (solide Hintergründe!)
   ====================================================================== */
.popup-background,
.overlay {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(4px);
}
.popup-body,
.popup-body.card {
  background: var(--cck-bg-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--cck-glass-bd) !important;
  border-radius: var(--cck-radius) !important;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

/* ======================================================================
   13. FIX: Suchergebnisse – muss absolute + solide + hoher z-index sein
   ====================================================================== */
.global-search-suggestions,
.global-search-suggestions.card {
  /* WICHTIG: BookStacks Default-Positionierung NICHT überschreiben */
  position: absolute !important;
  z-index: 200;
  /* Hintergrund komplett solide (kein Glas) */
  background: var(--cck-bg-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--cck-glass-bd) !important;
  border-radius: var(--cck-radius) !important;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    0 8px 20px -10px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  margin-top: 6px;
}
html.dark-mode .global-search-suggestions {
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.7),
    0 8px 20px -10px rgba(0, 0, 0, 0.4) !important;
}
.global-search-suggestions::before {
  display: none !important;
}
.global-search-suggestions a,
.global-search-suggestions .entity-list-item {
  background: transparent !important;
  color: var(--cck-fg-1) !important;
  border-radius: var(--cck-radius-sm);
}
.global-search-suggestions a:hover,
.global-search-suggestions .entity-list-item:hover {
  background: var(--cck-bg-2) !important;
  color: var(--cck-fg-0) !important;
}
.global-search-suggestions .card-footer-link {
  background: var(--cck-bg-2) !important;
  color: var(--cck-blue-2) !important;
  border-top: 1px solid var(--cck-glass-bd) !important;
  border-radius: 0 0 var(--cck-radius) var(--cck-radius) !important;
  font-weight: 600;
}
.global-search-suggestions .card-footer-link:hover {
  background: var(--cck-bg-3) !important;
  color: var(--cck-fg-0) !important;
}
.global-search-loading > div > div {
  background: var(--cck-blue-1) !important;
}

/* ======================================================================
   14. Custom-Dropdowns (User-Menü, Aktionen)
   ====================================================================== */
.dropdown-container,
ul.dropdown-menu,
.dropdown-search-dropdown,
.menu,
[class*="-dropdown-menu"] {
  background: var(--cck-bg-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--cck-glass-bd) !important;
  border-radius: var(--cck-radius) !important;
  box-shadow:
    var(--cck-shadow-inner),
    0 30px 60px -30px rgba(0, 0, 0, 0.35) !important;
  color: var(--cck-fg-0) !important;
}
html.dark-mode .dropdown-container,
html.dark-mode ul.dropdown-menu,
html.dark-mode .dropdown-search-dropdown,
html.dark-mode .menu,
html.dark-mode [class*="-dropdown-menu"] {
  box-shadow:
    var(--cck-shadow-inner),
    0 30px 60px -30px rgba(0, 0, 0, 0.7) !important;
}

.dropdown-container li,
.dropdown-container a,
.dropdown-container button,
.dropdown-menu li,
.dropdown-menu a,
.dropdown-menu button,
.icon-list-item,
a.icon-list-item,
button.icon-list-item {
  background: transparent !important;
  color: var(--cck-fg-1) !important;
}
.dropdown-container li > a:hover,
.dropdown-container li > button:hover,
.dropdown-menu li > a:hover,
.dropdown-menu li > button:hover,
.icon-list-item:hover,
a.icon-list-item:hover,
button.icon-list-item:hover {
  background: var(--cck-bg-2) !important;
  color: var(--cck-fg-0) !important;
}
.dropdown-container hr,
.dropdown-menu hr,
.menu hr {
  border-color: var(--cck-glass-bd) !important;
}
.dropdown-container .svg-icon,
.dropdown-menu .svg-icon,
.icon-list-item .svg-icon {
  fill: var(--cck-fg-2);
}
.icon-list-item:hover .svg-icon {
  fill: var(--cck-blue-2);
}

/* ======================================================================
   15. Scrollbar (Webkit)
   ====================================================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--cck-bg-3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cck-bg-4);
  background-clip: padding-box;
}

/* ======================================================================
   16. Login-Seite
   ====================================================================== */
body.login-screen,
.login-form-container {
  background:
    radial-gradient(900px 600px at 50% -10%, var(--cck-radial-1), transparent 60%),
    var(--cck-bg-0) !important;
}
.login-form-container .card {
  padding: 40px !important;
}

/* ======================================================================
   17. Logo-Bereich
   ====================================================================== */
.logo-text {
  color: var(--cck-fg-0);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo-image {
  filter: brightness(1.02);
}

/* ======================================================================
   18. Floating Light-/Dark-Mode-Toggle
   ====================================================================== */
.cck-mode-toggle {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(91, 164, 207, 0.35);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 60%),
    rgba(91, 164, 207, 0.16);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--cck-fg-1);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 24px -10px rgba(91, 164, 207, 0.35);
  overflow: hidden;
  position: fixed; /* re-declare nach overflow */
}
/* Highlight-Strich oben */
.cck-mode-toggle::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  pointer-events: none;
}
.cck-mode-toggle:hover {
  transform: translateY(-2px) scale(1.05);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
    rgba(91, 164, 207, 0.24);
  border-color: rgba(91, 164, 207, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 12px 28px -10px rgba(91, 164, 207, 0.45);
}
.cck-mode-toggle:focus-visible {
  outline: 2px solid var(--cck-blue-1);
  outline-offset: 2px;
}
.cck-mode-toggle svg {
  width: 20px;
  height: 20px;
}
.cck-mode-toggle .cck-icon-sun  { display: none; }
.cck-mode-toggle .cck-icon-moon { display: block; color: var(--cck-blue-2); }
html.dark-mode .cck-mode-toggle .cck-icon-sun  { display: block; color: var(--cck-gold-1); }
html.dark-mode .cck-mode-toggle .cck-icon-moon { display: none; }

/* ======================================================================
   19. Registrierungs-Hinweis auf Login-Seite
   ====================================================================== */
.cck-register-link {
  margin: 24px auto 0;
  max-width: 420px;
  text-align: center;
  font-family: var(--font-body);
}
.cck-register-link p {
  margin: 0 0 12px;
  font-size: 0.94rem;
  color: var(--cck-fg-2);
}
/* Liquid-Glass-Button für den Anmelde-Link */
.cck-register-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border-radius: var(--cck-radius-sm);
  color: var(--cck-blue-2) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
    rgba(91, 164, 207, 0.18);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(91, 164, 207, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 20px -10px rgba(91, 164, 207, 0.30);
  position: relative;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease;
}
.cck-register-link a::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}
.cck-register-link a:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
    rgba(91, 164, 207, 0.28);
  border-color: rgba(91, 164, 207, 0.65);
  color: var(--cck-blue-1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px -12px rgba(91, 164, 207, 0.40);
}

/* ======================================================================
   20. Settings-Seite
   ====================================================================== */
.setting-nav,
.settings-list,
.setting-list,
.setting-list-label-item,
.setting-content-wrap {
  background: transparent !important;
  color: var(--cck-fg-0);
}
.setting-nav .tab-item,
.setting-nav a {
  color: var(--cck-fg-2) !important;
  border-color: var(--cck-glass-bd) !important;
}
.setting-nav .tab-item.selected,
.setting-nav a.selected,
.setting-nav a[aria-selected="true"] {
  color: var(--cck-fg-0) !important;
  border-color: var(--cck-blue-1) !important;
}
.setting-list,
.setting-list > div,
.setting-list-label,
.setting-list-content {
  border-color: var(--cck-glass-bd) !important;
}
.setting-list-label,
.setting-list-label-item label {
  color: var(--cck-fg-0) !important;
}
.setting-list-label .text-muted,
.setting-list-content .text-muted,
.small.text-muted {
  color: var(--cck-fg-2) !important;
}
.content-wrap.card,
#content > .card,
main > .card,
.body-content .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%),
    var(--cck-glass-bg) !important;
  border: 1px solid var(--cck-glass-bd) !important;
  color: var(--cck-fg-0) !important;
}
.nav-tabs,
.toolbox-tab {
  border-bottom: 1px solid var(--cck-glass-bd) !important;
}
textarea[name="setting-app-custom-head"],
textarea[name*="setting-"] {
  background: var(--cck-bg-2) !important;
  color: var(--cck-fg-0) !important;
  font-family: var(--font-code) !important;
  font-size: 0.88rem;
  line-height: 1.6;
}
.text-muted,
p.text-muted,
.small {
  color: var(--cck-fg-2) !important;
}