html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

#toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 14px;
  background: #23252b;
  color: #eee;
  border-bottom: 1px solid #111;
  box-sizing: border-box;
}

.toolbar-brand {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-right {
  margin-left: auto;
}

.toolbar-label {
  font-size: 12px;
  color: #aaa;
}

#toolbar select,
#toolbar button,
.toolbar-file-label {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #444;
  background: #3a3d44;
  color: #eee;
  cursor: pointer;
}

#toolbar select:hover,
#toolbar button:hover,
.toolbar-file-label:hover {
  background: #4a4e57;
}

#toolbar button.btn-primary {
  background: #2b74e0;
  border-color: #2b74e0;
  font-weight: 600;
}

#toolbar button.btn-primary:hover {
  background: #3b84f0;
}

#gjs {
  height: calc(100% - 48px);
}

#toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #23252b;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10000;
}

#progress-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.progress-box {
  background: #23252b;
  color: #eee;
  border-radius: 6px;
  padding: 22px 26px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  font-size: 13px;
}

#progress-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}

.progress-track {
  height: 8px;
  border-radius: 4px;
  background: #3a3d44;
  overflow: hidden;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: #2b74e0;
  border-radius: 4px;
  transition: width 0.2s ease;
}

#progress-bar.indeterminate {
  width: 30% !important;
  animation: progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { margin-left: -30%; }
  100% { margin-left: 100%; }
}

#progress-status {
  margin-top: 10px;
  color: #aaa;
  font-size: 12px;
  min-height: 16px;
  word-break: break-word;
}


/* Galerie: Download des Originalbildes */
.portfolio-item .portfolio-overlay .portfolio-download {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 5;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
  border-radius: 3px;
  background: linear-gradient(to right, #fd4632 30%, #fa3a72 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.portfolio-item .portfolio-overlay .portfolio-download:hover,
.portfolio-item .portfolio-overlay .portfolio-download:focus {
  color: #ffffff;
  opacity: 0.88;
}

.toolbar-export-controls { display: inline-flex; align-items: center; gap: 8px; }
.toolbar-export-info { max-width: 220px; font-size: 11px; line-height: 1.2; opacity: .78; text-align: right; }

/* Beta 1.0: browserbezogener Exporthinweis */
.pb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.65);
}
.pb-modal-overlay[hidden] { display: none !important; }
.pb-modal {
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  color: #222;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
.pb-modal h2 { margin: 0 0 14px; }
.pb-modal p { line-height: 1.55; }
.pb-modal-check { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.pb-modal-actions { display: flex; justify-content: flex-end; margin-top: 22px; }

/* Beta 1.1: kontextsensitives Quick-Setup-Panel */
#pb-quick-panel {
  position: fixed;
  z-index: 9000;
  top: 58px;
  right: 12px;
  width: 340px;
  max-height: calc(100vh - 70px);
  overflow: auto;
  border: 1px solid #3f434c;
  border-radius: 8px;
  background: #292c33;
  color: #f5f5f5;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
#pb-quick-panel[hidden] { display:none !important; }
.pbq-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #41454e; background:#22252b; position:sticky; top:0; z-index:2; }
.pbq-head strong, .pbq-head small { display:block; }
.pbq-head small { margin-top:3px; color:#aeb4bf; font-size:11px; }
.pbq-head button { border:0; background:transparent; color:#fff; font-size:24px; cursor:pointer; }
.pbq-body { padding:16px; }
.pbq-body h2 { margin:0 0 14px; font-size:16px; }
.pbq-fields { display:grid; grid-template-columns:1fr; gap:12px; }
.pbq-fields label > span { display:block; margin-bottom:5px; color:#cbd0d8; font-size:12px; }
.pbq-fields input[type="text"], .pbq-fields input[type="number"], .pbq-fields select { width:100%; box-sizing:border-box; padding:8px 9px; border:1px solid #515660; border-radius:4px; background:#363a43; color:#fff; }
.pbq-check { display:flex; align-items:center; gap:8px; font-size:13px; }
.pbq-actions { display:flex; gap:8px; margin-top:18px; }
.pbq-actions button { padding:8px 11px; border:1px solid #515660; border-radius:4px; background:#3b3f48; color:#fff; cursor:pointer; }
.pbq-actions .btn-primary { background:#2b74e0; border-color:#2b74e0; }
.pbq-advanced { padding:14px 16px; border-top:1px solid #41454e; background:#24272d; }
.pbq-advanced strong { font-size:13px; }
.pbq-advanced p { margin:6px 0 0; color:#aeb4bf; font-size:11px; line-height:1.45; }
@media (max-width: 760px) { #pb-quick-panel { left:12px; width:auto; } }

/* Beta 1.1: elementbezogene Schnellbearbeitung */
#pb-quick-edit {
  position: fixed; z-index: 9100; top: 58px; right: 12px; width: 380px;
  max-height: calc(100vh - 70px); overflow: auto; border: 1px solid #3f434c;
  border-radius: 9px; background: #292c33; color: #f5f5f5;
  box-shadow: 0 14px 40px rgba(0,0,0,.48);
}
#pb-quick-edit[hidden] { display: none !important; }
.pbe-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #41454e; background:#22252b; position:sticky; top:0; z-index:3; }
.pbe-head strong, .pbe-head small { display:block; }
.pbe-head small { margin-top:3px; color:#aeb4bf; font-size:11px; }
.pbe-head button { border:0; background:transparent; color:#fff; font-size:24px; cursor:pointer; }
.pbe-body { padding:16px; }
.pbe-body h2 { margin:0; font-size:17px; }
.pbe-hint { margin:5px 0 16px; color:#aeb4bf; font-size:12px; }
.pbe-body section { margin:0 0 14px; padding:13px; border:1px solid #41454e; border-radius:7px; background:#25282f; }
.pbe-body section h3 { margin:0 0 12px; font-size:13px; color:#e4e7ec; }
.pbe-field { display:block; margin-bottom:11px; }
.pbe-field:last-child { margin-bottom:0; }
.pbe-field > span { display:block; margin-bottom:5px; color:#cbd0d8; font-size:12px; }
.pbe-field small { display:block; margin-top:4px; color:#9299a5; font-size:10px; }
.pbe-field input[type="text"], .pbe-field input[type="number"], .pbe-field select, .pbe-field textarea {
  width:100%; box-sizing:border-box; padding:8px 9px; border:1px solid #515660;
  border-radius:4px; background:#363a43; color:#fff; font:inherit;
}
.pbe-field textarea { resize:vertical; }
.pbe-check { display:flex; align-items:center; gap:8px; margin:10px 0; color:#d9dde4; font-size:12px; }
.pbe-color-row { display:grid; grid-template-columns:48px 1fr; gap:8px; }
.pbe-color-row input[type="color"] { width:48px; height:36px; padding:2px; border:1px solid #515660; border-radius:4px; background:#363a43; }
.pbe-foot { display:flex; gap:8px; padding:13px 16px; border-top:1px solid #41454e; background:#22252b; position:sticky; bottom:0; }
.pbe-foot button { padding:8px 11px; border:1px solid #515660; border-radius:4px; background:#3b3f48; color:#fff; cursor:pointer; }
.pbe-foot .pbe-primary { background:#2b74e0; border-color:#2b74e0; }
@media (max-width:760px) { #pb-quick-edit { left:12px; width:auto; } }

/* Beta 1.1 UI Refresh: lesbare Editor-Bereiche und konfigurierbare Dichte */
:root {
  --pb-panel-font-size: 15px;
  --pb-block-gap: 10px;
  --pb-block-padding: 11px;
  --pb-scrollbar-size: 12px;
  --pb-scrollbar-thumb: #7d8592;
  --pb-scrollbar-thumb-hover: #a7afbc;
  --pb-scrollbar-track: #24272d;
}

/* Hauptschalter rechts: Blöcke, Ebenen, Gestaltung und Eigenschaften */
.gjs-pn-views .gjs-pn-btn {
  min-width: 44px;
  min-height: 42px;
  padding: 9px 11px;
  font-size: calc(var(--pb-panel-font-size) + 1px);
  line-height: 1.2;
}
.gjs-pn-views .gjs-pn-btn::after { font-size: var(--pb-panel-font-size); }

/* Bezeichnungen, Kategorien und Formularfelder im rechten Editorbereich */
.gjs-pn-views-container,
.gjs-pn-views-container input,
.gjs-pn-views-container select,
.gjs-pn-views-container textarea,
.gjs-pn-views-container button {
  font-size: var(--pb-panel-font-size);
}
.gjs-block-category .gjs-title,
.gjs-sm-sector-title,
.gjs-layer-title,
.gjs-trt-trait__wrp {
  font-size: var(--pb-panel-font-size);
}
.gjs-block-category .gjs-title,
.gjs-sm-sector-title {
  min-height: 38px;
  padding: 10px 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Bausteinkacheln: bewusst zwischen kompakt und luftig */
.gjs-blocks-c {
  gap: var(--pb-block-gap);
  padding: var(--pb-block-gap);
}
.gjs-block {
  width: calc(50% - (var(--pb-block-gap) * .5));
  min-height: 76px;
  margin: 0;
  padding: var(--pb-block-padding);
  border-radius: 5px;
}
.gjs-block-label {
  margin-top: 7px;
  font-size: var(--pb-panel-font-size);
  line-height: 1.3;
}
.gjs-block__media { font-size: calc(var(--pb-panel-font-size) + 8px); }

/* Ebenen, Traits und Style-Manager mit etwas größeren Klickflächen */
.gjs-layer,
.gjs-trt-trait,
.gjs-sm-property {
  font-size: var(--pb-panel-font-size);
}
.gjs-layer-name,
.gjs-trt-trait,
.gjs-sm-property { min-height: 34px; }
.gjs-layer-name { padding-top: 7px; padding-bottom: 7px; }
.gjs-trt-trait { padding-top: 7px; padding-bottom: 7px; }

/* Deutlich sichtbare Scrollbalken in allen Editorbereichen */
.gjs-pn-views-container,
.gjs-blocks-c,
.gjs-layers,
.gjs-sm-sectors,
.gjs-trt-traits,
.gjs-am-assets-cont,
#pb-quick-panel,
#pb-quick-edit,
.pb-modal {
  scrollbar-width: auto;
  scrollbar-color: var(--pb-scrollbar-thumb) var(--pb-scrollbar-track);
}
.gjs-pn-views-container::-webkit-scrollbar,
.gjs-pn-views-container *::-webkit-scrollbar,
#pb-quick-panel::-webkit-scrollbar,
#pb-quick-edit::-webkit-scrollbar,
.pb-modal::-webkit-scrollbar {
  width: var(--pb-scrollbar-size);
  height: var(--pb-scrollbar-size);
}
.gjs-pn-views-container::-webkit-scrollbar-track,
.gjs-pn-views-container *::-webkit-scrollbar-track,
#pb-quick-panel::-webkit-scrollbar-track,
#pb-quick-edit::-webkit-scrollbar-track,
.pb-modal::-webkit-scrollbar-track {
  background: var(--pb-scrollbar-track);
  border-radius: 999px;
}
.gjs-pn-views-container::-webkit-scrollbar-thumb,
.gjs-pn-views-container *::-webkit-scrollbar-thumb,
#pb-quick-panel::-webkit-scrollbar-thumb,
#pb-quick-edit::-webkit-scrollbar-thumb,
.pb-modal::-webkit-scrollbar-thumb {
  min-height: 38px;
  border: 2px solid var(--pb-scrollbar-track);
  border-radius: 999px;
  background: var(--pb-scrollbar-thumb);
}
.gjs-pn-views-container::-webkit-scrollbar-thumb:hover,
.gjs-pn-views-container *::-webkit-scrollbar-thumb:hover,
#pb-quick-panel::-webkit-scrollbar-thumb:hover,
#pb-quick-edit::-webkit-scrollbar-thumb:hover,
.pb-modal::-webkit-scrollbar-thumb:hover { background: var(--pb-scrollbar-thumb-hover); }

/* Konfiguration der Editor-Oberfläche */
.pb-ui-modal { width: min(620px, 100%); }
.pb-ui-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.pb-ui-modal-head h2 { margin-bottom:4px; }
.pb-ui-modal-head p { margin:0; color:#666; }
.pb-ui-close { border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; }
.pb-ui-presets { display:flex; gap:8px; margin:20px 0; padding:14px; border:1px solid #d8dce2; border-radius:7px; }
.pb-ui-presets legend { padding:0 6px; font-weight:600; }
.pb-ui-presets button,
.pb-ui-actions button { padding:8px 12px; border:1px solid #aab0ba; border-radius:5px; background:#f4f5f7; cursor:pointer; }
.pb-ui-presets button.active { background:#2b74e0; border-color:#2b74e0; color:#fff; }
.pb-ui-controls { display:grid; gap:16px; }
.pb-ui-controls label > span { display:flex; justify-content:space-between; gap:16px; margin-bottom:7px; font-weight:600; }
.pb-ui-controls output { color:#2b74e0; font-variant-numeric:tabular-nums; }
.pb-ui-controls input[type="range"] { width:100%; accent-color:#2b74e0; }
.pb-ui-preview { margin-top:20px; padding:14px; border-radius:7px; background:#292c33; color:#fff; }
.pb-ui-preview > strong { display:block; margin-bottom:10px; }
.pb-ui-preview-card { margin-top:var(--pb-block-gap); padding:var(--pb-block-padding); border:1px solid #515660; border-radius:5px; font-size:var(--pb-panel-font-size); background:#353943; }
.pb-ui-preview-card span { display:inline-block; width:24px; }
.pb-ui-actions { gap:8px; }

/* Oluntir: Branding, Exportaktionen und Bausteinsuche */
.toolbar-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
}
.toolbar-brand-open { color: #65a3ff; }

/* Datei-/Galerieaktionen erhalten Luft, ohne die Toolbar unnötig aufzublähen. */
.toolbar-media-actions {
  gap: 10px;
  margin-inline: 4px;
  padding-inline: 6px;
}
.toolbar-media-actions .toolbar-file-label {
  padding-inline: 12px;
}

.toolbar-export-controls {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#toolbar .toolbar-export-controls .btn-primary {
  background: #2b74e0;
  border-color: #2b74e0;
  color: #fff;
  font-weight: 600;
}
#toolbar .toolbar-export-controls .btn-primary:hover,
#toolbar .toolbar-export-controls .btn-primary:focus-visible {
  background: #3b84f0;
  border-color: #3b84f0;
}

.pb-block-search {
  position: sticky;
  z-index: 8;
  top: 0;
  margin: 0;
  padding: 11px 10px 9px;
  border-bottom: 1px solid #444952;
  background: #292c33;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.pb-block-search-label {
  display: block;
  margin-bottom: 6px;
  color: #eef1f5;
  font-size: calc(var(--pb-panel-font-size) - 1px);
  font-weight: 600;
}
.pb-block-search-row {
  position: relative;
  display: flex;
  align-items: center;
}
.pb-block-search-icon {
  position: absolute;
  left: 10px;
  color: #aeb6c2;
  font-size: calc(var(--pb-panel-font-size) + 3px);
  pointer-events: none;
}
.pb-block-search input[type="search"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 34px 9px 34px;
  border: 1px solid #59606c;
  border-radius: 6px;
  outline: none;
  background: #1f2228;
  color: #fff;
  font-size: var(--pb-panel-font-size);
}
.pb-block-search input[type="search"]::placeholder { color: #8f98a6; }
.pb-block-search input[type="search"]:focus {
  border-color: #65a3ff;
  box-shadow: 0 0 0 2px rgba(43, 116, 224, .28);
}
.pb-block-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.pb-block-search-clear {
  position: absolute;
  right: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #d7dce4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pb-block-search-clear:hover { background: #3b4049; color: #fff; }
.pb-block-search-status {
  min-height: 16px;
  margin-top: 5px;
  color: #aeb6c2;
  font-size: calc(var(--pb-panel-font-size) - 3px);
}
.gjs-block[hidden],
.gjs-block-category[hidden] { display: none !important; }

/* Oluntir: harmonisierte obere Werkzeugleiste */
#toolbar {
  gap: 0;
  height: 54px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #59606d #23252b;
}

#toolbar::-webkit-scrollbar { height: 7px; }
#toolbar::-webkit-scrollbar-track { background: #23252b; }
#toolbar::-webkit-scrollbar-thumb {
  background: #59606d;
  border-radius: 999px;
}

#toolbar .toolbar-brand {
  flex: 0 0 auto;
  margin-right: 10px;
  padding-right: 14px;
}

#toolbar .toolbar-group {
  flex: 0 0 auto;
  gap: 9px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, .10);
}

#toolbar .toolbar-right {
  margin-left: auto;
  padding-right: 2px;
}

#toolbar select,
#toolbar button,
#toolbar .toolbar-file-label {
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 11px;
  line-height: 1.15;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#toolbar select {
  display: inline-block;
  padding-right: 28px;
}

/* Medienaktionen bewusst etwas stärker von den Nachbargruppen absetzen. */
#toolbar .toolbar-media-actions {
  gap: 11px;
  margin: 0;
  padding-left: 15px;
  padding-right: 15px;
}

#toolbar .toolbar-media-actions .toolbar-file-label {
  min-width: 0;
  padding-left: 14px;
  padding-right: 14px;
}

#toolbar .toolbar-export-controls {
  gap: 8px;
  margin-left: 2px;
}

#toolbar .toolbar-export-controls .btn-primary {
  padding-left: 13px;
  padding-right: 13px;
}

@media (max-width: 1500px) {
  #toolbar .toolbar-group {
    gap: 7px;
    padding-left: 9px;
    padding-right: 9px;
  }

  #toolbar select,
  #toolbar button,
  #toolbar .toolbar-file-label {
    padding-left: 9px;
    padding-right: 9px;
  }
}

/* Oluntir: Projekthauptleiste ohne horizontalen Scrollbalken.
   Sekundäre Bedienfunktionen liegen jetzt als Symbole in der Editorleiste darunter. */
#toolbar {
  overflow-x: hidden;
  scrollbar-width: none;
}
#toolbar::-webkit-scrollbar { display: none; }

/* Zusätzliche Oluntir-Symbole in der unteren GrapesJS-Werkzeugleiste. */
.gjs-pn-options .gjs-pn-btn[data-pb-toolbar-tool="true"] {
  position: relative;
  min-width: 38px;
  padding-left: 10px;
  padding-right: 10px;
}
.gjs-pn-options .gjs-pn-btn[data-pb-toolbar-separator="true"] {
  margin-left: 8px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.gjs-pn-options .gjs-pn-btn[data-pb-toolbar-tool="true"]:hover,
.gjs-pn-options .gjs-pn-btn[data-pb-toolbar-tool="true"]:focus-visible {
  background: rgba(101,163,255,.18);
  color: #fff;
}


/* Oluntir 1.0.0 — UI foundation
   Form folgt Funktion: eine Schrift, klare Linien, keine dekorativen Effekte. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/Inter-Regular.otf') format('opentype');
}
:root {
  --oluntir-ui-font: 'Inter', Arial, sans-serif;
  --oluntir-bg: #202226;
  --oluntir-panel: #292b30;
  --oluntir-panel-2: #24262a;
  --oluntir-line: #4a4d54;
  --oluntir-text: #f2f2f2;
  --oluntir-muted: #b5b7bc;
  --oluntir-accent: #2878d4;
}
html, body, button, input, select, textarea,
.gjs-editor,
.gjs-editor *:not(.fa):not(.gjs-fonts):not([class^="gjs-f-"]):not([class*=" gjs-f-"]),
.pb-modal, .pb-modal *:not(.fa),
#pb-quick-panel, #pb-quick-panel *:not(.fa),
#pb-quick-edit, #pb-quick-edit *:not(.fa) {
  font-family: var(--oluntir-ui-font) !important;
}
/* Icon fonts are functional glyph resources, not a second UI typeface.
   They must never inherit the Oluntir text font. */
.fa, .fa::before {
  font-family: FontAwesome !important;
}
.gjs-fonts, [class^="gjs-f-"], [class*=" gjs-f-"] {
  font-family: gjs-fonts !important;
}
body { background: var(--oluntir-bg); }
#toolbar {
  height: 56px;
  padding: 0 12px;
  background: var(--oluntir-bg);
  border-bottom: 1px solid var(--oluntir-line);
  box-shadow: none;
}
#gjs { height: calc(100% - 56px); }
#toolbar .toolbar-brand {
  display: flex; align-items: baseline; gap: 4px;
  margin-right: 8px; padding-right: 16px;
  font-size: 17px; font-weight: 700; letter-spacing: 0;
  color: var(--oluntir-accent);
}
.toolbar-brand-open { color: inherit; }
.toolbar-version { margin-left: 7px; color: var(--oluntir-muted); font-size: 10px; font-weight: 400; }
.toolbar-language { display:flex; align-items:center; gap:3px; padding:0 10px 0 0; color:var(--oluntir-muted); }
.toolbar-language button { min-height:auto !important; padding:3px 4px !important; border:0 !important; background:transparent !important; color:var(--oluntir-muted) !important; font-size:11px !important; }
.toolbar-language button.active { color:#fff !important; text-decoration:underline; text-underline-offset:4px; }
#toolbar .toolbar-group { border-left:1px solid var(--oluntir-line); min-height:32px; padding-inline:10px; gap:7px; }
#toolbar select, #toolbar button, #toolbar .toolbar-file-label {
  min-height: 32px; padding: 6px 9px; border:1px solid #55585f; border-radius:2px;
  background:#31343a; color:var(--oluntir-text); box-shadow:none; font-size:12px;
}
#toolbar select:hover, #toolbar button:hover, #toolbar .toolbar-file-label:hover { background:#3a3d43; }
#toolbar button.btn-primary, #toolbar .toolbar-export-controls .btn-primary { background:var(--oluntir-accent); border-color:var(--oluntir-accent); }
#toolbar button.btn-primary:hover, #toolbar .toolbar-export-controls .btn-primary:hover { background:#3585df; border-color:#3585df; }
.gjs-one-bg { background-color: var(--oluntir-panel); }
.gjs-two-color { color: var(--oluntir-text); }
.gjs-three-bg { background-color: var(--oluntir-accent); color:#fff; }
.gjs-four-color, .gjs-four-color-h:hover { color:#74aeea; }
.gjs-pn-panel { box-shadow:none; }
.gjs-pn-views .gjs-pn-btn { border-radius:0; border-bottom:2px solid transparent; }
.gjs-pn-views .gjs-pn-btn.gjs-pn-active { background:transparent; border-bottom-color:var(--oluntir-accent); box-shadow:none; }
.gjs-block-category .gjs-title, .gjs-sm-sector-title {
  background:var(--oluntir-panel-2); border-bottom:1px solid var(--oluntir-line); border-radius:0; box-shadow:none;
  text-transform:none; letter-spacing:0; font-weight:600;
}
.gjs-blocks-c { padding:8px; gap:8px; }
.gjs-block {
  min-height:72px; padding:10px; border:1px solid #4a4d54; border-radius:2px;
  background:#303238; box-shadow:none; transition:background-color .12s ease, border-color .12s ease;
}
.gjs-block:hover { background:#383b41; border-color:#777b84; box-shadow:none; }
.gjs-block-label { margin-top:5px; }
.pb-block-search { padding:9px; background:var(--oluntir-panel); border-bottom:1px solid var(--oluntir-line); box-shadow:none; }
.pb-block-search-label { margin-bottom:5px; font-weight:600; }
.pb-block-search input[type="search"] { padding:8px 32px; border-radius:2px; background:#202226; border-color:#55585f; box-shadow:none; }
.pb-block-search input[type="search"]:focus { border-color:#7caee5; box-shadow:none; }
.pb-modal-overlay { background:rgba(0,0,0,.58); }
.pb-modal, #pb-quick-panel, #pb-quick-edit {
  border-radius:2px; box-shadow:0 12px 34px rgba(0,0,0,.34);
}
.pb-modal { border-top:4px solid var(--oluntir-accent); }
.pb-ui-presets, .pb-ui-preview, .pb-ui-preview-card, .pbe-body section { border-radius:2px; }
.pb-ui-presets button, .pb-ui-actions button, .pbq-actions button, .pbe-foot button { border-radius:2px; }
#toast { border-radius:2px; }
* { scrollbar-color:#858991 #24262a; }

/* RC1: größere, schnell erfassbare Werkzeug-Icons. */
.gjs-pn-panels .gjs-pn-btn {
  font-size: 28px !important;
  min-width: 42px;
  min-height: 38px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gjs-pn-panels .gjs-pn-btn.fa::before,
.gjs-pn-panels .gjs-pn-btn[class*=" fa-"]::before {
  font-size: 28px !important;
  line-height: 1;
}
.gjs-pn-views .gjs-pn-btn { min-width: 46px; }
.gjs-pn-options .gjs-pn-btn { margin-inline: 2px; }

/* RC1: Icon-Korrektur nach Praxistest.
   Etwa 15 % kleiner als der vorherige 28-px-Stand und mit synchronisierter
   Panelhöhe, damit die Werkzeugleiste den darunterliegenden Bereich nicht überdeckt. */
.gjs-pn-panels .gjs-pn-btn,
.gjs-pn-panels .gjs-pn-btn.fa::before,
.gjs-pn-panels .gjs-pn-btn[class*=" fa-"]::before {
  font-size: 24px !important;
}
.gjs-pn-panels .gjs-pn-btn {
  min-width: 38px;
  min-height: 36px;
  padding: 6px 8px;
}
.gjs-pn-views {
  height: 50px;
  min-height: 50px;
}
.gjs-pn-views-container {
  padding-top: 50px;
}
.gjs-pn-views .gjs-pn-btn {
  min-width: 40px;
}

/* Oluntir Includes (Oluntir) Preview 0.1 */
.oluntir-includes-modal { width: min(980px, 94vw); max-height: 90vh; overflow: auto; }
.oluntir-includes-modal > label { display: grid; gap: .4rem; margin: .8rem 0; }
.oluntir-include-enable { display: flex !important; align-items: center; gap: .65rem !important; padding: .8rem; background: rgba(0,0,0,.05); }
.oluntir-includes-modal select, .oluntir-includes-modal textarea, .oluntir-includes-modal input[type="text"], .oluntir-include-section-row input { width: 100%; box-sizing: border-box; }
.oluntir-includes-modal textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.oluntir-include-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.oluntir-include-grid label { display: grid; gap: 6px; font-weight: 700; }
.oluntir-include-section-row { display: grid; grid-template-columns: 180px 1fr 42px; gap: 8px; margin: 8px 0; align-items: start; }
.oluntir-include-section-row textarea { min-height: 80px; }
.oluntir-include-hint { font-size: .9rem; opacity: .8; }
@media (max-width: 760px) { .oluntir-include-grid { grid-template-columns: 1fr; } .oluntir-include-section-row { grid-template-columns: 1fr; } }

/* Oluntir Manager Preview 0.3 */
.oluntir-project-choice { margin: 1rem 0; padding: 1rem; border: 1px solid #55585f; }
.oluntir-project-choice legend { font-weight: 700; }
.oluntir-choice-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.oluntir-choice-row label { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:start; padding:12px; border:1px solid #55585f; cursor:pointer; }
.oluntir-choice-row label span { grid-column:2; opacity:.75; font-size:.9rem; }
.oluntir-manager-layout, .oluntir-manager-validation { margin-top:18px; padding-top:14px; border-top:1px solid #55585f; }
.oluntir-manager-section-head, .oluntir-manager-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.oluntir-manager-section-head p { margin:.25rem 0 .75rem; opacity:.8; }
.oluntir-manager-card { margin:12px 0; padding:14px; border:1px solid #55585f; background:rgba(0,0,0,.08); }
.oluntir-manager-card-head small { display:block; margin-top:3px; opacity:.72; }
.oluntir-manager-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.oluntir-manager-card label { display:grid; gap:5px; margin-top:10px; font-weight:600; }
.oluntir-manager-card fieldset { margin-top:12px; }
.oluntir-page-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 12px; }
.oluntir-page-check { display:flex !important; flex-direction:row !important; align-items:center; gap:6px !important; margin:0 !important; font-weight:400 !important; }
.oluntir-unused-warning { margin:.8rem 0 0; padding:.55rem .7rem; border-left:3px solid #d9a441; background:rgba(217,164,65,.12); }
.oluntir-check { margin:5px 0; padding:7px 9px; border-left:3px solid; }
.oluntir-check.is-ok { border-color:#55a86a; }
.oluntir-check.is-warning { border-color:#d9a441; }
.oluntir-check.is-error { border-color:#d66565; }
.oluntir-manager-empty { padding:16px; border:1px dashed #666; opacity:.8; }
.oluntir-includes-modal button:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:760px) { .oluntir-choice-row,.oluntir-manager-fields,.oluntir-page-grid { grid-template-columns:1fr; } }

/* Session Manager Preview 0.4 */
.oluntir-startup-overlay { z-index: 10000; }
.oluntir-startup-modal { max-width: 720px; }
.oluntir-startup-choice { border: 0; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; }
.oluntir-startup-choice label { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid #c8ccd0; border-radius: 6px; padding: 1rem; cursor: pointer; }
.oluntir-startup-choice label:has(input:checked) { outline: 2px solid currentColor; }
.oluntir-startup-choice input { margin-top: .25rem; }
.oluntir-startup-choice span { display: grid; gap: .3rem; }
.oluntir-startup-choice small, .oluntir-startup-storage { color: #5d6268; line-height: 1.45; }
.oluntir-startup-choice input:disabled + span { opacity: .55; }
.oluntir-startup-warning { border-left: 4px solid #9b6b00; padding: .65rem .8rem; background: #fff8df; }
.oluntir-ended-screen { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; background: #f5f5f2; padding: 2rem; text-align: center; }
.oluntir-ended-screen[hidden] { display: none; }
.oluntir-application-ended > *:not(#oluntir-ended-screen) { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* Project Wizard Preview 0.5 */
.oluntir-wizard-step[hidden] { display: none; }
.oluntir-project-summary { margin: 1rem 0; padding: 1rem; border: 1px solid #c8ccd0; border-radius: 6px; background: rgba(0,0,0,.025); }
.oluntir-project-summary h3 { margin-top: 0; }
.oluntir-project-summary ul { margin: .5rem 0 1rem 1.2rem; }
.oluntir-required-note { color: #5d6268; font-size: .9rem; }

/* SSI Export Preview 0.3: getrennte Auswahl von Exportformat und Exportziel */
.oluntir-export-format-modal { max-width: 720px; }
.oluntir-export-format-choice { display: grid; gap: .75rem; margin: 1rem 0; padding: 0; border: 0; }
.oluntir-export-format-choice legend { font-weight: 700; margin-bottom: .35rem; }
.oluntir-export-format-choice > label { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--pb-border, #c9c9c9); border-radius: .45rem; cursor: pointer; }
.oluntir-export-format-choice > label:has(input:checked) { outline: 2px solid currentColor; outline-offset: 1px; }
.oluntir-export-format-choice input { margin-top: .2rem; }
.oluntir-export-format-choice span { display: grid; gap: .2rem; }
.oluntir-export-format-choice small { opacity: .78; line-height: 1.35; }
.oluntir-export-format-note { padding: .75rem 1rem; border-left: 4px solid currentColor; background: rgba(127,127,127,.12); }

/* Oluntir Editor Preview 0.1 -------------------------------------------------- */
.oluntir-code-overlay { z-index: 10020; }
.oluntir-code-modal { width: min(94vw, 1180px); max-width: none; height: min(88vh, 820px); display: flex; flex-direction: column; }
.oluntir-code-head { flex: 0 0 auto; }
.oluntir-code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.oluntir-code-modes { display: inline-flex; gap: 4px; padding: 3px; background: rgba(0,0,0,.24); border-radius: 6px; }
.oluntir-code-modes button { border: 0; border-radius: 4px; padding: 7px 12px; background: transparent; color: inherit; cursor: pointer; }
.oluntir-code-modes button.active { background: rgba(255,255,255,.14); font-weight: 700; }
.oluntir-code-badge { font-size: 12px; opacity: .82; }
.oluntir-code-grid { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 14px; }
.oluntir-code-pane { min-height: 0; display: flex; flex-direction: column; background: #231f24; }
.oluntir-code-pane-title { flex: 0 0 auto; padding: 7px 10px; text-align: right; font-size: 12px; font-weight: 700; color: #d8a83c; background: rgba(0,0,0,.28); }
.oluntir-code-pane textarea { width: 100%; min-height: 0; flex: 1 1 auto; resize: none; border: 0; outline: 0; padding: 12px; background: #2b222a; color: #f3e9dd; font: 13px/1.55 Consolas, Monaco, "Courier New", monospace; tab-size: 2; white-space: pre; overflow: auto; }
.oluntir-code-pane textarea[readonly] { opacity: .82; cursor: default; }
.oluntir-code-note { margin: 0; padding: 7px 10px; font-size: 12px; background: rgba(216,168,60,.12); }
.oluntir-code-actions { flex: 0 0 auto; }
@media (max-width: 820px) { .oluntir-code-grid { grid-template-columns: 1fr; } .oluntir-code-modal { height: 94vh; } .oluntir-code-toolbar { align-items: flex-start; flex-direction: column; } }

/* Oluntir Editor Preview 0.2 -------------------------------------------------- */
.oluntir-code-format { border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 7px 10px; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
.oluntir-code-format:hover { background: rgba(255,255,255,.14); }
.oluntir-code-format kbd { margin-left: 6px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; background: rgba(0,0,0,.24); font: inherit; font-size: 10px; }
.oluntir-code-host { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.oluntir-code-editor-shell { height: 100%; min-height: 0; display: grid; grid-template-columns: auto minmax(0,1fr); overflow: hidden; background: #2b222a; color: #f3e9dd; font: 13px/1.55 Consolas, Monaco, "Courier New", monospace; }
.oluntir-code-lines { min-width: 46px; overflow: hidden; padding: 12px 9px 12px 7px; border-right: 1px solid rgba(255,255,255,.08); background: #211b21; color: #807681; text-align: right; user-select: none; }
.oluntir-code-lines span { display: block; height: 1.55em; }
.oluntir-code-layer { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.oluntir-code-highlight,
.oluntir-code-layer textarea { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 12px; border: 0; font: inherit; line-height: inherit; tab-size: 2; white-space: pre; overflow: auto; }
.oluntir-code-highlight { z-index: 1; pointer-events: none; background: #2b222a; color: #e8dfe7; }
.oluntir-code-highlight code { font: inherit; }
.oluntir-code-layer textarea { z-index: 2; resize: none; outline: 0; background: transparent; color: transparent; caret-color: #fff; -webkit-text-fill-color: transparent; }
.oluntir-code-layer textarea::selection { background: rgba(100,160,255,.34); }
.oluntir-code-editor-shell.is-readonly .oluntir-code-layer textarea { cursor: default; caret-color: transparent; }
.tok-tag { color: #7dcfff; }
.tok-tag-name { color: #72d6ff; font-weight: 600; }
.tok-attr { color: #ffd866; }
.tok-value { color: #a9dc76; }
.tok-punct,
.tok-bracket { color: #c9c3ca; }
.tok-comment { color: #7f8c86; font-style: italic; }
.tok-doctype { color: #ab9df2; }
.tok-entity { color: #fc9867; }
.tok-oluntirInternal { color: #78dce8; background: rgba(120,220,232,.10); border-radius: 2px; }
.tok-oluntirInternal .tok-tag-name { color: #ff78d1; text-shadow: 0 0 10px rgba(255,120,209,.22); }
.tok-oluntirInternal .tok-attr { color: #ffd866; }
.tok-oluntirInternal .tok-value { color: #a9dc76; }
.tok-selector { color: #ff6188; }
.tok-property { color: #78dce8; }
.tok-css-value { color: #a9dc76; }
.oluntir-code-status { min-height: 24px; padding: 4px 14px; font-size: 12px; }
.oluntir-code-status.is-success { color: #a9dc76; }
.oluntir-code-status.is-error { color: #ff6188; }
@media (max-width: 820px) {
  .oluntir-code-format kbd { display: none; }
  .oluntir-code-lines { min-width: 38px; }
}
