body {
      margin: 0;
      font-family: Arial, sans-serif;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Navbar fixiert */
    nav.navbar {
      z-index: 100;
    }

    /* ganz ans Ende deines Stylesheets, nach Bootstrap */
    .navbar-brand {
      display: grid !important;
      /* lege 2 Spalten an: Bild + Text */
      grid-auto-flow: column;
      /* Abstand zwischen Spalten */
      column-gap: .5rem;
      /* zentriere Bild und Text vertikal */
      align-items: center !important;
    }
    
    /* Bild auf die gewünschte Höhe skalieren, Breite passt sich an */
    .navbar-brand img {
      height: 30px;
      width: auto;
      /* entferne jeden extra whitespace */
      display: block;
    }
    
    /* Text ohne eigene Zeilen‐Manipulation */
    .navbar-brand .brand-text {
      margin: 0;
      line-height: normal;
    }

    .animated-rainbow {

      background-image: linear-gradient(
        45deg,
        #000851 20%,
        #1CB5E0 60%,
        #aa00a2 80%
      );
      background-size: 200% 200%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: rainbow-diag 3s linear infinite alternate;
    }
    
    @keyframes rainbow-diag {
      /* ganz unten links */
      0%   { background-position: 0% 100%; }
      /* ganz oben rechts */
      100% { background-position: 100% 0%; }
    }


    
    
    .main-layout {
      flex-grow: 1;
      display: flex;
      overflow: hidden;
      background-color: #e0e0e0;
    }

    /* Inhaltsverzeichnis Sidebar (links) */
    .sidebar-toc {
      width: 300px;
      background-color: white;
      height: 100%;
      overflow-y: auto;       /* vertikal scrollen */
      box-sizing: border-box;
      border-radius: 0px 10px 10px 0px;
      margin-top: 1rem;
      max-height: calc(100vh - 2rem);
    }

    /* Aktive Überschrift im TOC orange hervorheben */
    .sidebar-toc .toc-entry.active {
      color: #ff8800 !important;
    }
    /* Sanfte Übergänge bei Hover/Active */
    .sidebar-toc .toc-entry {
      transition: color 180ms ease, background-color 180ms ease;
    }
    /* Leichte Hover-Hervorhebung im TOC */
    .sidebar-toc .toc-entry:hover {
      background-color: rgba(0, 0, 0, 0.06);
      border-radius: 4px;
    }

    .sidebar-toc h2,
    .sidebar-toc h3,
    .sidebar-toc h4,
    .sidebar-toc p {
      margin: 0.5rem 0;
    }

    /* Rollenverwaltung Sidebar (rechts) */
    .sidebar-roles {
      width: 250px;
      background-color: white;
      height: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      border-radius: 10px 0 0 10px;
      overflow: hidden;
      margin-top: 1rem;
      margin-bottom: 10px;
      padding: 0.5rem;
    }

    .rollen-wrapper {
      color: gray;
      padding: 0.2rem 0rem 0.2rem 0.2rem;
    }

    .rollen-block {
      background: #dde3ff;
      padding: 0.2rem 0.5rem 0.3rem 0.5rem;
      margin-bottom: 0.5rem;
      border-radius: 5px 0 0 5px;
    }

    .rollen-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.3rem;
      font-weight: 400;
      margin-bottom: 0rem;
    }

    .rolle {
      font-weight: bold;
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .rolle span {
      font-weight: normal;
      margin-left: 0.5rem;
      font-size: 0.9rem;
      cursor: pointer;
    }

    role_id {
      font-weight: bold;
      background-color: #dd00ff;
      padding: 2px 4px;
      border-radius: 3px;
      white-space: pre-wrap;
      display: inline-block;      /* wie ein einzelnes Objekt */
      white-space: nowrap;        /* nicht umbrechen */
      user-select: none;          /* markierung im Text überspringen */
    }

    role_id[contenteditable="false"] {
      caret-color: transparent;   /* kein Cursor drin */
    }

    /* in deiner Haupt-CSS oder <style> */
    span.highlighted-role {
      background-color: rgba(255, 235,  59, 0.5);
      border-radius: 2px;
      /* keine pointer-events: none, damit Selektion noch geht */
    }
    

    /* Editor-Bereich */
    .editor-wrapper {
      flex-grow: 1;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 1rem;
      background-color: #e0e0e0;
      box-sizing: border-box;
    }

    .editor-container {
      width: 100%; 
      max-width: 800px;
      margin: auto;
    }

    .continuous-page {
      background: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      padding: 2rem;
      width: 794px;
      min-height: 1122px;
      /* A4 initial height @ 96dpi */
      box-sizing: border-box;
      margin: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .editor-block {
      border: none;            /* entfernt jegliche Ränder */
      outline: none;           /* entfernt Fokus-Outline */
      background: transparent; /* falls du vorher eine Farbe hattest */
      cursor: text;            /* Text-Cursor immer anzeigen */
      caret-color: auto;       /* lässt die caret-Farbe an der Text-Farbe orientieren */
      white-space: pre-wrap;
      word-break: break-word;
    }
    .editor-block:focus {
      outline: none;           /* auch beim Fokussieren keine Outline */
    }

    .role-dropdown {
      position: absolute;
      background: white;
      border: 1px solid #ccc;
      z-index: 2000;
      padding: 0.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      width: 300px;
      overflow: visible;
    }

    .role-dropdown .search {
      width: 100%;
      margin-bottom: 0.5rem;
      padding: 0.25rem 0.5rem;
      border: 1px solid #ccc;
    }

    .role-dropdown .role-entry {
      padding: 0.3rem 0.5rem;
      cursor: pointer;
    }

    .role-dropdown .role-entry:hover {
      background-color: #eef;
    }

    .role-list {
      max-height: calc(5 * 2rem); /* Platz für 5 Einträge */
      overflow-y: auto;           /* nur hier scrollen */
      overflow-x: hidden;
      margin-top: 0.5rem;
    }

    .role-entry {
      padding: 0.5rem 0.75rem;
    }

    .temp-highlight {
      background-color: #ff0;
      color: #000;
    }

    .sidebar-toc,
    .sidebar-roles {
      /* ersetzt margin-top und margin-bottom einzelner Regeln */
      margin: 1rem 0;
      /* passt die Höhe so an, dass oben und unten je 1rem frei bleibt */
      height: calc(100% - 2rem);
    }

    /* CSS */
    .editor-block.with-placeholder:empty:before {
      content: attr(data-placeholder);
      color: #999; /* oder Bootstrap .text-secondary */
      pointer-events: none;
    }

    /* ————————————————————————————————
  Dark-Mode Overrides via data-bs-theme
  ———————————————————————————————— */
    html[data-bs-theme="dark"] {
      --bs-body-bg: #121212;
      --bs-body-color: #e0e0e0;
      --bs-white: #1e1e1e;
      --bs-gray-100: #2a2a2a;
      --bs-gray-300: #3a3a3a;
      --bs-gray-600: #ccc;
      --bs-gray-800: #444;
    }

    html[data-bs-theme="dark"] body {
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
    }

    html[data-bs-theme="dark"] nav.navbar {
      background-color: var(--bs-white);
      border-bottom: 1px solid var(--bs-gray-300);
    }

    html[data-bs-theme="dark"] .sidebar-toc,
    html[data-bs-theme="dark"] .sidebar-roles {
      background-color: var(--bs-gray-100);
      color: var(--bs-body-color);
      border-color: var(--bs-gray-300);
    }
    /* Dark-Mode: TOC Hover etwas aufhellen */
    html[data-bs-theme="dark"] .sidebar-toc .toc-entry:hover {
      background-color: rgba(255, 255, 255, 0.08);
    }

    html[data-bs-theme="dark"] .continuous-page {
      background-color: var(--bs-white);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    }

    html[data-bs-theme="dark"] .btn-outline-primary {
      color: var(--bs-body-color);
      border-color: var(--bs-gray-800);
    }

    html[data-bs-theme="dark"] .btn-outline-primary:hover,
    html[data-bs-theme="dark"] .btn-outline-primary:focus {
      background-color: var(--bs-gray-800);
    }

    html[data-bs-theme="dark"] .dropdown-menu {
      background-color: var(--bs-gray-100);
      color: var(--bs-body-color);
      border-color: var(--bs-gray-300);
    }

    html[data-bs-theme="dark"] .dropdown-item {
      color: var(--bs-body-color);
    }

    html[data-bs-theme="dark"] .editor-wrapper,
    html[data-bs-theme="dark"] .main-layout {
      background-color: #525252 !important;
    }

    html[data-bs-theme="dark"] .dropdown-item:hover,
    html[data-bs-theme="dark"] .dropdown-item:focus {
      background-color: var(--bs-gray-300);
    }

    html[data-bs-theme="dark"] .block-wrapper {
      background-color: var(--bs-light-bg-subtle) !important;
      color: var(--bs-body-color);
    }

    /* ganz ans Ende deines Stylesheets, nach allen anderen Regeln */
    html[data-bs-theme="dark"] p.editor-block[data-role="temp"] {
      /* hier dein helleres BlueViolet */
      color: hsl(264, 100%, 81%) !important;
    }


    /* Inline block actions and insert button */
    .block-wrapper {
      position: relative;
    }

    .block-actions i.pointer {
      font-size: 1.1rem;
      line-height: 1;
    }

    .block-insert-btn {
      position: absolute;
      right: -26px; /* nudged 2px further right (total +4px) */
      top: -14px;
      transform: none;
      width: 22px;   /* restore circle size */
      height: 22px;  /* restore circle size */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-width: 0; /* no extra circle, icon provides outline */
      border-style: none;
      z-index: 4;
      background: transparent;
    }
    /* Size Bootstrap Icons for crisp look */
    .block-insert-btn i { font-size: 16px; line-height: 1; }

    /* Light theme visibility */
    .block-insert-btn.btn-outline-light {
      color: #9aa0a6;         /* more subtle glyph */
      border-color: rgba(185,190,197,.7); /* softer circle */
    }

    /* Dark mode tweak for plus button */
    html[data-bs-theme="dark"] .block-insert-btn.btn-outline-light {
      color: #6e7378;                   /* darker glyph in dark */
      border-color: rgba(128,134,139,.45); /* softer, dimmer circle */
    }
    .block-insert-btn.btn-outline-light:hover,
    .block-insert-btn.btn-outline-light:focus {
      background-color: transparent; /* avoid inner-fill that looks doubled */
      color: #7a8087; /* slightly stronger glyph on hover */
      border-color: currentColor;
    }
    html[data-bs-theme="dark"] .block-insert-btn.btn-outline-light:hover,
    html[data-bs-theme="dark"] .block-insert-btn.btn-outline-light:focus {
      background-color: transparent; /* avoid doubled look in dark */
      color: #858a90; /* slight lift on hover */
      border-color: currentColor;
    }

    /* Bottom add button styling to match plus behavior */
    .editor-add-btn {
      width: 36px;
      height: 36px;
      padding: 0;
      border-width: 0; /* no extra circle, icon provides outline */
      border-style: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: #8a8f98;
      border-color: #b9bec5;
    }
    .editor-add-btn i { font-size: 18px; line-height: 1; }
    .editor-add-btn:hover,
    .editor-add-btn:focus {
      background-color: rgba(138,143,152,.20);
      color: #8a8f98;
      box-shadow: inset 0 0 0 1px currentColor;
    }
    html[data-bs-theme="dark"] .editor-add-btn {
      color: #6e7378;       /* darker glyph */
      border-color: #6a7075; /* dimmer ring */
    }
    html[data-bs-theme="dark"] .editor-add-btn:hover,
    html[data-bs-theme="dark"] .editor-add-btn:focus {
      background-color: rgba(154,160,166,.12);
      color: #858a90; /* slight lift on hover */
      border-color: currentColor;
    }

    /* Subtle purple outline button (TEMP) */
    .btn-temp {
      background: transparent;
      color: #6b2fb7;
      border-color: #6b2fb7;
    }
    .btn-temp:hover,
    .btn-temp:focus {
      background: rgba(107,47,183,.12);
      color: #4c1f8a;
      border-color: #4c1f8a;
    }
    html[data-bs-theme="dark"] .btn-temp {
      color: #e0b3ff;
      border-color: #e0b3ff;
      background: transparent;
    }
    html[data-bs-theme="dark"] .btn-temp:hover,
    html[data-bs-theme="dark"] .btn-temp:focus {
      background: rgba(224,179,255,.15);
      color: #ffffff;
      border-color: #ffffff;
    }
    /* Bottom big add icon: restore color + hover */
    .editor-add-plus {
      color: #8a8f98; /* light mode default */
      transition: color .15s ease-in-out;
    }
    .editor-add-plus:hover,
    .editor-add-plus:focus {
      color: #b9bec5;
    }
    html[data-bs-theme="dark"] .editor-add-plus {
      color: #6e7378; /* darker in dark */
    }
    html[data-bs-theme="dark"] .editor-add-plus:hover,
    html[data-bs-theme="dark"] .editor-add-plus:focus {
      color: #858a90; /* subtle lift on hover */
    }