/* StudiAI 6.3 – visueller Texteditor */

.rich-editor{
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:var(--card);
  box-shadow:0 8px 24px rgba(18,44,82,.07)
}
.rich-editor:focus-within{
  border-color:color-mix(in srgb,var(--blue) 65%,var(--line));
  box-shadow:0 0 0 4px rgba(47,117,255,.11),0 12px 30px rgba(18,44,82,.08)
}
.rich-editor-toolbar{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:52px;
  padding:7px 9px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 92%,var(--surface-hover));
  flex-wrap:wrap
}
.rich-editor-toolbar-spacer{flex:1}
.rich-editor-divider{
  width:1px;
  height:26px;
  margin:0 3px;
  background:var(--line)
}
.rich-editor-button,
.rich-editor-select{
  min-height:36px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted-strong);
  font:inherit;
  font-size:12px;
  font-weight:760;
  cursor:pointer
}
.rich-editor-button{
  min-width:36px;
  padding:7px 9px
}
.rich-editor-button:hover,
.rich-editor-button.active,
.rich-editor-select:hover{
  border-color:var(--line);
  background:var(--surface-hover);
  color:var(--ink)
}
.rich-editor-button.active{
  border-color:color-mix(in srgb,var(--blue) 48%,var(--line));
  background:color-mix(in srgb,var(--blue) 10%,var(--card));
  color:var(--blue)
}
.rich-editor-select{
  max-width:180px;
  padding:6px 29px 6px 9px;
  border-color:var(--line);
  background-color:var(--card)
}
.rich-editor-variable-wrap .rich-editor-select{
  max-width:210px
}
.rich-editor-workspace{
  display:grid;
  grid-template-columns:1fr
}
.rich-editor-content,
.rich-editor-preview-content{
  padding:24px 26px;
  color:var(--text);
  font-size:16px;
  line-height:1.72;
  outline:none;
  overflow-wrap:anywhere
}
.rich-editor-content{
  overflow:auto;
  max-height:720px;
  background:var(--card)
}
.rich-editor-content:empty::before{
  content:"Hier klicken und den Inhalt schreiben …";
  color:var(--muted);
  pointer-events:none
}
.rich-editor-content h1,
.rich-editor-preview-content h1{
  margin:0 0 18px;
  color:var(--ink);
  font-size:31px
}
.rich-editor-content h2,
.rich-editor-preview-content h2{
  margin:26px 0 10px;
  color:var(--ink);
  font-size:24px
}
.rich-editor-content h3,
.rich-editor-preview-content h3{
  margin:22px 0 8px;
  color:var(--ink);
  font-size:20px
}
.rich-editor-content h4,
.rich-editor-preview-content h4{
  margin:18px 0 7px;
  color:var(--ink);
  font-size:17px
}
.rich-editor-content p,
.rich-editor-preview-content p{
  margin:0 0 13px
}
.rich-editor-content ul,
.rich-editor-content ol,
.rich-editor-preview-content ul,
.rich-editor-preview-content ol{
  margin:9px 0 15px;
  padding-left:27px
}
.rich-editor-content li,
.rich-editor-preview-content li{
  margin:5px 0
}
.rich-editor-content blockquote,
.rich-editor-preview-content blockquote{
  margin:18px 0;
  padding:13px 17px;
  border-left:4px solid var(--blue);
  border-radius:0 11px 11px 0;
  background:color-mix(in srgb,var(--blue) 7%,var(--card-soft));
  color:var(--muted-strong)
}
.rich-editor-content a,
.rich-editor-preview-content a{
  color:var(--blue);
  text-decoration:underline
}
.rich-editor-content hr,
.rich-editor-preview-content hr{
  border:0;
  border-top:1px solid var(--line);
  margin:24px 0
}
.rich-editor-preview{
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--card-soft) 90%,var(--card))
}
.rich-editor-preview-label{
  padding:10px 25px 0;
  color:var(--blue);
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase
}
.rich-editor-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:9px 13px;
  border-top:1px solid var(--line);
  background:var(--card-soft);
  color:var(--muted);
  font-size:10.5px
}
.rich-editor-count{
  white-space:nowrap;
  font-weight:760
}
.rich-editor-validation{
  padding:10px 13px;
  border-top:1px solid rgba(239,68,68,.24);
  background:rgba(239,68,68,.09);
  color:#dc2626;
  font-size:12px;
  font-weight:760
}
.rich-editor-source-field{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}
.rich-editor-source-field.rich-editor-source-visible{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:380px!important;
  padding:18px!important;
  margin:0!important;
  overflow:auto!important;
  clip:auto!important;
  white-space:pre-wrap!important;
  border:0!important;
  border-radius:0!important;
  background:var(--card)!important;
  color:var(--text)!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important;
  font-size:13px!important;
  line-height:1.55!important
}
.rich-editor.source-mode .rich-editor-footer{
  border-top:1px solid var(--line)
}
.rich-editor-field-help{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 9px;
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb,var(--blue) 7%,var(--card-soft));
  color:var(--muted-strong);
  font-size:12px;
  line-height:1.45
}
.rich-editor-field-help strong{color:var(--ink)}
.rich-editor-field-help-icon{
  flex:0 0 25px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--blue) 14%,var(--card));
  color:var(--blue);
  font-size:13px
}

:root[data-theme="dark"] .rich-editor{
  box-shadow:0 12px 28px rgba(0,0,0,.22)
}
:root[data-theme="dark"] .rich-editor-toolbar{
  background:rgba(14,31,54,.94)
}
:root[data-theme="dark"] .rich-editor-select{
  background-color:#10243d
}

@media(max-width:760px){
  .rich-editor-toolbar{
    gap:4px;
    padding:7px
  }
  .rich-editor-select{
    max-width:145px
  }
  .rich-editor-variable-wrap{
    order:8;
    flex:1 1 100%
  }
  .rich-editor-variable-wrap .rich-editor-select{
    width:100%;
    max-width:none
  }
  .rich-editor-toolbar-spacer{
    display:none
  }
  .rich-editor-content,
  .rich-editor-preview-content{
    padding:18px 16px;
    font-size:15px
  }
  .rich-editor-footer{
    align-items:flex-start
  }
  .rich-editor-help{
    max-width:75%
  }
}