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);
    }

    .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);
    }

    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;
    }