/* FOUC verhindern */
[hidden]{display:none!important;}

/* Backdrop */
.exmodal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
  z-index: 9998;
}

/* Modal (Default-Position – wird per JS überschrieben) */
.exmodal{
  position: fixed;
  top: 6vh; right: 2vw;
  width: min(520px, 92vw);
  max-height: 86vh; overflow: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 9999;
  font: 16px/1.4 system-ui, Roboto, Arial, sans-serif;
}

/* Header */
.exmodal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border-bottom: 1px solid #eee; background:#fafafa;
}
.exmodal-header h3{ margin:0; font-size:18px; }
.exmodal-close{
  border:0; background:transparent; font-size:22px; line-height:1;
  cursor:pointer; color:#666;
}
.exmodal-close:hover{ color:#000; }

/* Zielwahl */
.exmodal-dest{
  display:flex; gap:8px; align-items:center;
  padding:10px 12px; border-bottom:1px solid #f0f0f0; background:#fcfcfc;
  font-size:14px;
}
.exmodal-dest label{ color:#4c566a; }
.exmodal-dest select{
  flex:1; padding:6px 8px; border-radius:6px; border:1px solid #d9dfe7; background:#fff;
  font: 14px/1.2 system-ui, Roboto, Arial, sans-serif;
}

/* Liste */
.exmodal-list{ list-style:none; margin:0; padding:10px 12px; }
.exmodal-list li{ padding:10px 6px; border-radius:6px; cursor:pointer; }
.exmodal-list li:hover{ background:#f3f6f9; }

/* Hinweis */
.exmodal-note{
  margin: 8px 12px 12px; padding: 8px 10px; font-size: 13px; line-height: 1.35;
  color: #45515f; background:#f5f7fa; border:1px solid #e5e9f0; border-radius:6px;
}




#chatbot-container {
   position: absolute;
   top: 190px;
   left: 238px;
   width: 505px;
   height: 550px;
   background-color: #f9f9f9; /*#f1f1f1;*/
   border: 1px solid #ccc;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   z-index: 100;
   overflow: auto;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease; 
}

#chatbot-container.visible {
    display: block;
    opacity: 1;
}

#chatbot-header {
    background-color: #a12323;
    color: white;
    padding: 10px;
    cursor: move;
    user-select: none;
    border-radius: 8px 8px 0 0;
    font: 16px Roboto, Arial, sans-serif;
}

#chatbot-close {
  position: absolute;
  right: 6px;
  top: 3px;
  cursor: pointer;
  font-size: 28px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px; /* Vertikal zentrieren */
  border-radius: 4px;
  transition: background-color 0.3s ease;
  font-family: Roboto, Arial, sans-serif; /* Schlankere Schriftart */
  font-weight: 300; /* Dünnere Schriftstärke */
}

#chatbot-close:hover {
  background-color: #e04b4b; /* Hellroter Hintergrund beim Hover */
}

#chatbot-body {
    padding: 8px;
    margin-top: 6px;
}

#chatHeader {
    font: 16px Roboto, Arial, sans-serif;
    margin-left: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#SucheArt {
    font: 14px Roboto, Arial, sans-serif;
    margin-left: 10px;
    margin-bottom: 20px;
}


#allPrompts {
    font: 14px Roboto, Arial, sans-serif;
    margin-top: 10px;
    margin-bottom: 20px;
}


.myButtonList {
    display: block;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 10px;
    padding: 10px;
    font-size: 1rem;
    cursor: pointer;
    background-color: #f6f6f6; /*#e0e0e0;*/
    border: none;
    border-radius: 4px;
    text-align: left;
    font: 14px Roboto, Arial, sans-serif;
}

.myButtonList:hover, .myButtonList:active {
    background-color: #d0d0d0; /* Etwas dunkler als der normale Zustand */
    color: black; /* fixiere die Textfarbe auf schwarz */
}

.chatInfo {
  color: #3C3C3C;
  font-family:Roboto, Arial, sans-serif;
  font-size: 13px;
  margin-bottom: 6px;
  margin-top: 4px;
  margin-left: 3px;
}


.chatPrompt {
  color: #3C3C3C;
  background-color: #fcfcfc;
  font-family:Roboto, Arial, sans-serif;
  font-size: 16px;
  border-style: solid;
  border-width: 1px;
  border-color: #ADAAAA;
  border-radius: 5px;
  margin-bottom: 6px;
  margin-top: 4px;
  margin-left: 2px;
  padding-left: 5px;
}


.myWatermark {
   font-family: Roboto,  Arial, sans-serif;
   font-size: 14px;
   color: grey;
   padding-left: 5px;
   padding-top: 5px;
}

.chatSuggest {
    text-decoration: none;
    outline: none;
    font: 14px Roboto, Arial, sans-serif;
}

.AbkTextOben {
   font: 14px Roboto, Arial, sans-serif;
   padding-top: 10px;
   padding-bottom: 5px;
}

.AbkTitel {
   font-family: Roboto, Arial, sans-serif;
   font-size: 14px;
}

#A5dlg5\.BODY\.CONTENT * {
  padding: 0 1px !important;
}

#KIzeile {
  display: flex;
  align-items: center;
  width: 99%;
}

#KIBeispiele {
  margin-right: 10px;
  padding-left: 3px;
  cursor: pointer;
  font: 14px Roboto, Arial, sans-serif;
}

.KIAngabe {
  padding-top: 10px;
  padding-left: 15px;
  font: 14px Roboto, Arial, sans-serif;
}

#KIText {
  flex: 1;
  padding-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ClearKIText {
  border: none;
  cursor: pointer;
}

.sendbutton {
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: #ccc;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

/*hover für die Buttons im Rechereche-Assitenten */

#CHATBOT\.V\.R1\.PROMPT\.CUSTOMBUTTON\.0 > i:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.PROMPT\.CUSTOMBUTTON\.1 > i:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.PROMPT1\.CUSTOMBUTTON\.0 > i:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.PROMPT1\.CUSTOMBUTTON\.1 > i:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.PROMPT2\.CUSTOMBUTTON\.0 > i:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.PROMPT2\.CUSTOMBUTTON\.1 > i:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.PROMPT4\.CUSTOMBUTTON\.0 > i:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.PROMPT4\.CUSTOMBUTTON\.1 > i:hover {
  background-color:#f0f0f0;
}


#GesetzAbkButton:hover .RION3Button {
  background-color:#f0f0f0;
}

#KIBeispiele:hover .RION3Button {
  background-color:#f0f0f0;
}

#KIAssVideo:hover .RION3Button {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.CLEARKIABFRAGE\.ICON:hover {
  background-color:#f0f0f0;
}

#CHATBOT\.V\.R1\.STARTBUTTON\.ICON:hover {
  background-color: #f0f0f0; /* heller grauer Hintergrund */
}


/* KI-Dialog Layout (über .ki-root scoped) und kleinere Anpassungen*/
#KIDialog .RI-image-left {
  top: -15px;
}

/* oder direkt scoped: */
#KIDialog .RI-Menu
{ position: relative;
 top: -25px;
}

.ki-root{
  display:flex;
  gap:20px;                 /* Abstand zwischen links/rechts */
  align-items:flex-start;
  margin-top:20px;
  margin-bottom: 50px;
}

/* linke Spalte */
.ki-root .ki-sidebar{
  width:260px;
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:8px;
  padding:8px;
}

/* Sidebar: „Neue Rechtsfrage“-Button */
.ki-sidebar .ki-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: .5rem .75rem;
  border-radius: 10px;
  border: 1px solid #e0e6ee;
  background: #fff;
  color: #1f2a37;
  font: 600 14px/1.2 Roboto, Arial, sans-serif;
  cursor: pointer;
  margin: 0 0 10px;
  transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}

.ki-sidebar .ki-new-btn:hover{
  background:#f5f7fa;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.ki-sidebar .ki-new-btn:active{ transform: translateY(1px); }
.ki-sidebar .ki-new-btn:focus-visible{
  outline:none;
  border-color:#a12323;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(161,35,35,.35);
}
.ki-sidebar .ki-new-btn .plus{
  margin-right:.5rem;
  width:16px; height:16px;
  vertical-align:-2px;
  opacity:.85;
}

/* KI-Sidebar: History-Zeilen mit Delete */
.ki-list { list-style:none; margin:0; padding:0; }

.ki-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.ki-row .ki-item {
  flex: 1 1 0;
  min-width: 0;
  padding: .4rem .6rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #e0e6ee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: 500 11px/1.2 Roboto, Arial, sans-serif;
  color: #1f2a37;
  transition: background .15s, border-color .15s;
}

.ki-row:hover .ki-item {
  border-radius: 8px 0 0 8px;
  border-right: none;
  background: #f7f9fb;
  border-color: #d4dae3;
}

.ki-del {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border: 1px solid #e0e6ee;
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  color: rgba(0,0,0,0.3);
  padding: 0;
  transition: color .12s;
}

.ki-row:hover .ki-del {
  display: flex;
}

.ki-del:hover {
  background: #fff5f5;
  color: #c0392b;
}

/* NEU */
.ki-del svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.ki-del:active { transform: translateY(1px); }

.ki-row:hover .ki-item {
  border-radius: 8px 0 0 8px;
  border-right: none;
}

/* rechte Spalte */
.ki-root .ki-main{
  flex:1;                               /* nimmt Restbreite */
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:8px;
  padding: 14px 16px;
  font:15px/1.5 Roboto, Arial, sans-serif;
  min-width: 800px;
  display: flex;
  flex-direction: column;
  min-height: 0; /* wichtig für Scrollen im Inneren*/
}
.ki-root .ki-main p{ margin: 0 0; }

.ki-root .ki-note{
  margin-top:10px;
  padding:10px 12px;
  background:#f5f7fa;
  border:1px solid #e5e9f0;
  border-radius:6px;
  font-size:13px;
  color:#45515f;
}


.ki-main .ki-lead { margin: 0 0 6px; }
.ki-main .ki-lead:last-child { margin-bottom: 0; }
/* --- KI-Dialog Startkarte ------------------------------------- */
.ki-main .ki-card{
  background:#fff;
  border:1px solid #e7eaee;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
  padding:16px 18px;
}

/* Text in der KI-Startkarte darf markiert/kopiert werden */
.ki-main .ki-card,
.ki-main .ki-card * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Links/Buttons behalten normal den Pointer-Cursor */
.ki-main .ki-card .ki-examples a,
.ki-main .ki-card button {
  cursor: pointer;
}

/* Kopfbereich wie im Hero-Feature */
.ki-main .ki-hero{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 20px;
}

.ki-main .ki-hero-iconwrap{
  width:44px; height:44px; flex:0 0 44px;
  border-radius:12px;
  background:linear-gradient(180deg,#eef2ff 0%, #e9f1ff 100%);
  display:grid; place-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.ki-main .ki-hero-icon{ width:26px; height:26px; display:block; }
.ki-main .ki-hero-icon.mi{ font-size:22px; color:#334155; } /* falls Icon-Font */

.ki-main .ki-hero h3{
  margin:0;
  font-size:18px; font-weight:700; color:#1f2a37;
}
.ki-hero-body{
  margin:.15rem 10px 0;
  font-size:16px;
  font-weight:700;  
  line-height:1.35;
  color:#1f2a37;
}

/* Absätze kompakt */
.ki-main .ki-lead{ margin:0 0 6px; }
.ki-main .ki-lead:last-child{ margin-bottom:0; }

/* Beispiele-Link */
.ki-main .ki-examples{
  padding-top:15px;
  padding-bottom: 15px;
  font-size:15px; color:#2f3b4a;
}

/* Tipp-Hinweis als zartes Badge */
.ki-main .ki-note{
  background:#f2f5f9;
  color:#3a495a;
  border:1px solid #e0e6ee;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
}

#ki-haupt #AuswertungText {
  padding: 0; 
}

#ki-haupt #AuswertungText > ul {
  margin-left: 20px;
  padding-left: 0;        /* optional: Standard-Einzug neutralisieren */
}

#ki-haupt #AuswertungText > ul > li + li {
  margin-top: 6px;        /* „kleiner, schöner“ Abstand – gerne auf 8px erhöhen */
}

#ri-haupt {
min-width: 600px;
}


/*Format für KI-Dialog*/
/* Format für KI-Dialog – schlicht */

/* Absätze */
#AuswertungText p {
    margin: 0 0 0.3em 0;
    line-height: 1.5;
    color: #222222;
}

/* Listen */
#AuswertungText ul,
#AuswertungText ol {
    margin: 0 0 0.5em 0;
    padding-left: 1.25em;
}

/* Optional: Standard für Blockquotes/Pre, falls vorhanden (schlicht) */
#AuswertungText blockquote,
#AuswertungText pre {
    margin: 0 0 0.5em 0;
}

/* Optional: Wenn oft Labels wie "<strong>Frage:</strong> ..." vorkommen,
   dann nur leicht abheben – ohne Block/Box */
#AuswertungText p > strong:first-child {
    display: block;
    margin-bottom: 0.5em;
    color: #343a40;
    font-size: 0.95em;
    letter-spacing: 0.5px;
}