/* Typography imported from Google Fonts */
/* lokal an Server @import url('http://localhost/Ridaonline/fonts/RIDAFonts.css');*/ 

@import url('../fonts/RIDAFonts.css');

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', Arial, sans-serif;
}

p, a {
  font-family: 'Roboto', Arial, sans-serif;
  color: #3C3C3C;
}

/* Generic styles */
html {
  scroll-behavior: smooth;
}

html, body {
	height: 100%;
        margin: 0;
        font-family: Roboto, Arial, sans-serif;
        color: #3C3C3C;
        background-color: #f9f9f9;
}


body {
  background: #f9f9f9;
  padding: 5px;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  border: none;
  outline: none;
}

a img {
    border-style: none;
    outline: none;
}

button {
    border-style: none;
    outline: none;
}

/* === AI-Badge === */
/* AI-Badge – für helle und dunkle Hintergründe */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 7px;
  margin-bottom: 3px;
  border-radius: 4px;
  background: linear-gradient(135deg, #8B6FD4, #C54040);
  color: white;
  line-height: 1.3;
  border: none;
  vertical-align: middle;
}

.classic-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  margin-bottom: 2px;
  border-radius: 4px;
  background: #F5EAEA;
  vertical-align: middle;
}

.ai-badge_1 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 0.5px solid #9B3FC5;
  line-height: 1.2;
  vertical-align: middle;
}
.ai-badge-text_1 {
  background: linear-gradient(135deg, #6C3FC5 0%, #9B3FC5 50%, #C54040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}


/* roter Button */
#Knopfrot {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  background: #a12323;
  color: #fff;
  margin-top: 20px;
  margin-left: 120px;
}

#Knopfrot:hover {
  background: #333;
}


.RION3Page {
display: flex;
flex-direction: column;
min-height: 100vh;
        font-family: Roboto, Arial, sans-serif;
        color: #3C3C3C;
        background-color: #f9f9f9; 
}

.background1 {
   background-color: #f9f9f9;
}

/*Grundstruktur der Seite */

#outer-container {
flex: 1 0 auto;

    display: flex;
    flex-direction: column; /* Vertikale Anordnung von div1 und div2 */
    min-height: 100%; 
}


#RION2Rahmen {
   background-color: #f9f9f9;
    flex-grow: 1; /* Füllt den verbleibenden Platz aus */
    display: flex; /* Flexbox für wraplinks & wraprechts */
    flex-direction: row; /* Horizontal anordnen */
    overflow-y: auto;
    align-items: flex-start;
}

#RION2Linkswrap {
   background-color: #f9f9f9;
   transition: max-height 0.5s ease-out; /* Smooth transition */
   min-width: 220px;
   display: flex;
   overflow: hidden;
   height: auto;
position: relative;
}

#RION2Linkswrap.collapsed {
  width: 0 !important; /* Einklappen des Divs auf 0 Breite */
  padding: 0; /* Entfernt eventuell noch vorhandenes Padding */
  min-width: 0px;
}

#balken.shadow.handler {
    align-self: stretch;  /* ← DAS FEHLT! */
    flex: 0 0 6px;
    cursor: ew-resize;
}

.shadow {
    /*background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
    width: 7px;
    left:2px;
    z-index: 99;
    position: unset !important;

}
.shadow.handler{
    cursor: ew-resize; /* Zeigt den horizontalen Resize-Cursor an */

}

#RION2Rechtswrap {
    display: flex;
    flex-grow: 1; /* Nimmt den verbleibenden Platz ein */
    margin-left: 12px;
position: relative;
}

#RION3Footer {
    background-color: #3B4252;
    height: 30px;
    position: relative;
}


/*Kopf der Startseite */

#RION3Kopf {
  background-color: #FFFFFF;
  margin-bottom: 0;
  position: relative;
  height: 0px;
}

/*Suchzeile */

#RION3Oben2 {
  background: linear-gradient(180deg, #4C566A 0%, #3B4252 100%); /*#3B4252; #6f889c; #8ca9cf; #a5bdd7; #cfe4fa; #7ea6c3; #026A8F; #3589af;*/
  height: 180px;
  position: sticky;
  width: 100%;
  box-shadow: inset 0 -3px 0 #a12323;
}

#RION3Suche {
  position: relative;
  margin-top: 0px;
  width: 100%;
  font-family: Roboto, Arial, sans-serif;
  color: #3C3C3C;
}

#RION3Suche  > div > div  {
    width: 100%
}

/* Tabs */
#toggleSuche{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 8px;
  /* horizontaler Versatz, damit die Tabs genau über .RI-Suchfeld sitzen */
  margin-left: 230px;
}

@supports selector(:has(*)) {
  #RION3Oben2:has(#KIDialog:not([style*="display: none"])) #toggleSuche {
    margin-left: 290px;
  }
}


.RI-tabs{
  display:flex; 
  gap:10px; 
  align-items:center;
  width:100%;
}

:root{
  --bg: #2f3641;
  --panel: #ffffff;
  --text: #1b2430;
  --muted: #6b7480;

  --accent: #c21c16;      /* RIDA-Rot für Highlights */
  --accent-600: #a91510;  /* Hover */
  --accent-100: #fde8e7;  /* zarter Hintergrund */

  --tab-bg: #3a4250;
  --tab-on: #ffffff;
  --tab-off: #b8c0cc;

  --radius: 22px;
  --shadow: 0 6px 18px rgba(0,0,0,.12);
  --shadow-focus: 0 0 0 4px rgba(194,28,22,.16);
}

/* Inaktiv: gedimmt */
.ri-tab {
  appearance: none;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  padding: .5rem .9rem;
  border-radius: 8px;
  font: 500 14px/1.2 Roboto, Arial, sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .08s ease;
}

/* Hover inaktiv */
.ri-tab:not(.active):hover {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.07);
}

/* Aktiv: dezenter doppelter Rand */
.ri-tab.active,
.ri-tab[aria-selected="true"] {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
  background: transparent;
  color: #ffffff;
}

/* SVG im inaktiven Tab gedimmt */
.ri-tab svg {
  opacity: 0.5;
  transition: opacity .2s ease;
}

/* SVG im aktiven Tab voll sichtbar */
.ri-tab.active svg,
.ri-tab[aria-selected="true"] svg {
  opacity: 1;
}

/* SVG beim Hover etwas heller */
.ri-tab:not(.active):hover svg {
  opacity: 0.7;
}

.ri-tab:focus { outline: none; }
.ri-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
  border-color: #ffffff;
  background: transparent;
}

.rotri-tab.active,
.fotri-tab[aria-selected="true"] {
  border-color: #e53935;                       /* Rot */
  box-shadow:
    0 0 0 1.5px rgba(229,57,53,.35),           /* äußerer Glow */
    0 0 10px rgba(229,57,53,.45);              /* weicher Glow */
  background: rgba(229,57,53,.10);
  color: #fff;
}

/* Wrapper um Prompt + Button, damit der Button unten rechts verankert */
.ri-ki-container{
  position:relative;
  display:block;
  width:min(48rem, 100%);
}

/* Das Eingabefeld (z. B. <textarea class="RI-KIFrage">) */
.RI-KIFrage{
  display:block;
  width:100%;
  max-width: 1000px; /* Maximale Breite von 900px */
  min-width: 250px; /* Minimale Breite von 250px */
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  background:var(--panel);
  color:var(--text);
  border:1px solid #d7dbe2;
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  border-style: solid;
  border-width: 1px;
  border-color: #ADAAAA;
  transition:border-color .2s, box-shadow .2s, background .2s;
  margin-bottom: 6px;
  margin-top: 4px;
  margin-left: 20px;
  padding-top:    15px;
  padding-right:  50px;
  padding-bottom: 40px;
  padding-left:   20px;
}

.RI-KIFrage::placeholder{ color:var(--muted); }
.RI-KIFrage:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow: var(--shadow-focus), var(--shadow);
}

.myWatermarkKI
 {
    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
    color: grey;
    padding-left: 20px;
    padding-top: 15px;
}

/* Container dient als Bezug für die absolute Positionierung */
.RI-SuchfeldKI {
  position: relative;
  display: inline-block;   /* shrink-wrap auf Inhalt */
  width: fit-content;      /* moderne Browser: passt sich der Textarea an */
  max-width: 100%;
  flex: 0 0 auto;          /* in Flex-Layouts nicht auf volle Breite wachsen */
  margin-left: 62px;
}

/* Textarea-Breite festlegen + Platz für Button reservieren */
textarea[id="RION2SUCHE.V.R1.PROMPT3"]{
  display: block;
  width: clamp(600px, 70vw, 1200px);  /* passt sich an, max. 900px */
  padding-right: 56px;               /* ~ Iconbreite + Luft */
}

/* Button unten rechts im Feld */
button[id="RION2SUCHE.V.R1.STARTBUTTON"]{
  position: absolute !important;
  right: 10px;
  bottom: 10px;

  /* bessere Klickfläche */
  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;

  transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

.rida-tool-item {
  align-items: center;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
/* Browser-Button-Reset: */
  background: transparent !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.rida-tool-item:hover {
  background: rgba(0,0,0,0.06) !important;
}

.rida-tool-item img {
  opacity: 0.4;
}
.rida-tool-item:hover img {
  opacity: 0.6;
}

.rida-ki-tool-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, #8B6FD4, #C54040);
  align-items: center; justify-content: center;
}

.rida-print-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  align-items: center; justify-content: center;
}

.rida-tool-label { font-size: 10px; white-space: nowrap; }
.rida-tool-label.ki { color: #7B5BBF; font-weight: 500; }
.rida-tool-label.print { color: #888; }

/*Formatierung Direktsuche*/
#AuswertungText, #AuswertungText1, #AuswertungText2, #AuswertungText3 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #222;
  padding: 18px;
  width: 90%;
  max-width: 1400px;
  margin: 15px auto;
  background: #fff;
  user-select: text;      /* Text markieren/kopieren erlaubt */
  white-space: normal;    /* Normaler Zeilenumbruch */
  overflow-wrap: anywhere;
}

/* Überschriften h2 + h3 */
#AuswertungText h2, #AuswertungText1 h2, #AuswertungText2 h2, #AuswertungText3 h2 {
  color: #3C3C3C;
  margin-bottom: 0.5em;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  padding-bottom: 3px;
  letter-spacing: 0.02em;
}

/* Überschriften h3 */
#AuswertungText h3, #AuswertungText1 h3, #AuswertungText2 h3, #AuswertungText3 h3 {
  color: #a12323;
  margin-bottom: 0.5em;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  padding-bottom: 3px;
  letter-spacing: 0.02em;
}

h3.rida-summary-heading {
    color: #3a3a3a !important;
    font-weight: 600 !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.3em !important;
    font-size: 16px;
}

/* Dein konkreter Container unter den Tabs, links bündig */
#SucheKlassisch {
  margin-left: 0;      /* sicherheitshalber links bündig */
  padding-top: 8px;    /* statt 30px aus .RI-container -> kleiner Abstand */
}

.RI-container, .RI-containerKI {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Elemente verteilen */
  gap: 10px;
  width: 100%; /* Nimmt bei 100% die gesamte Breite des RION2-Containers ein */
  padding-top: 0px;
  padding-bottom: 0px;
  flex-wrap: wrap; /* erlaubt Umbruch */
}

.RI-image-left {
  width: 200px; /* Feste Breite für die Bilder */
  height: auto; /* Höhe passt sich dem Seitenverhältnis an */
  position: relative; 
  cursor: pointer;
  top: 5px;
}

.RI-SucheStarten {
  width: 50px; /* Feste Breite für die Bilder */
  height: auto; /* Höhe passt sich dem Seitenverhältnis an */
  margin-left: 0px;
}

.RI-Suchfeld {
  flex: 1; /* Macht das Textfeld flexibel */
  max-width: 900px; /* Maximale Breite von 900px */
  min-width: 250px; /* Minimale Breite von 250px */
  margin-left: 20px; 
  padding: 10px;
  border-radius: 22px;
  background-color: #fff;
  outline: none;
  height: 50px;
}

#RI-SuchArt {
  width: auto;
  margin-left: 12px;
  color: white;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.RI-Menu {
    width: 30px;
    height: auto;
    margin-left: auto; /* Schiebt das Element ganz nach rechts */
    margin-right: 30px; /* 20px Abstand zum rechten Rand */
    cursor:pointer;
}

#buttons-unten {
  flex: 0 0 100%;
  display: flex;          /* wichtig */
  align-items: center;
  gap: 10px;              /* Abstand zwischen Buttons */
  margin-top: 5px;
  margin-left: 230px;     
}

#WebinarAnmeldung {
 margin-top: 15px;
}

#WebinarAnmeldung a:hover {
 filter: brightness(1.1);
}
#WebinarAnmeldung a:focus-visible {
    outline: 2px solid #a12323;
    outline-offset: 2px;
}



/* Button "Recherche-Assistent" */
/* Basis-Button */
/* Kompaktere Variante */
.chatbot-toggle {
display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 5px 15px;
 border-radius: 20px;
 border: 2px solid rgba(255,255,255,0.35);
 background: transparent;
 color: #CBD5E1;
 cursor: pointer;
 font-size: 13px;
 flex-shrink: 0;
 transition: all 0.15s;
 white-space: nowrap;
}

/* Hover (dezent) */
.chatbot-toggle:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.10);
}

/* Active/Pressed Feedback */
.chatbot-toggle:active { transform: translateY(1px); }

/* Tastaturfokus sichtbar lassen */
.chatbot-toggle:focus:not(:focus-visible) { outline: none; }

.chatbot-toggle:focus-visible {
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.45),
    0 0 10px rgba(255,255,255,.65);
}

/* Zustand „aktiv“ (weißes Glühen) */
.chatbot-toggle.active,
.chatbot-toggle[aria-pressed="true"] {
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.45),         /* äußerer Glow */
    0 0 10px rgba(255,255,255,.65);            /* weicher Glow */
  background: rgba(255,255,255,.12);
  color: #fff;
}

.chatbot-toggle:disabled,
.chatbot-toggle.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;   /* verhindert Klicks bei <a> */
  box-shadow: none;
}

/* optional: Hovereffekte neutralisieren */
.chatbot-toggle:disabled:hover,
.chatbot-toggle.is-disabled:hover {
  filter: none;
}


.loginbutton,.logoutbutton {
    color: white;
    font-size: 14px;
    height: 23px;
    padding-left: 0px;
    padding-top: 4px;
    position: absolute;
    right: 0px;
    width: 80px;
    cursor:pointer;
    z-index: 1;
}

.LoginText {
   margin-left: 0px;
   position: relative;
   top: -3px;
   z-index: auto;
}

#RIONUserID {
    color: white;
    font-size: 12px;
    height: 15px;
    padding-top: 5px;
    position: absolute;
    top: 150px;
    right: 3px;
    width: auto;
}

.InfoSuche {
    margin-top: 10px;
    color: #fff;
    font-size: 13px;
}


.RION3Win {
   color: #3C3C3C;
   border: none;
}

.RION3WinActive {
   background: #FEFEFE;
   -webkit-box-shadow: 0 0 2px #333;

}

.RION3WinBodyContainer {
   border: none;
   margin: 0px;
}

/*Vorschlagsliste */

.RION3List {
   background: #FEFEFE;
   font: 14px Roboto, Arial, sans-serif;
   -webkit-box-shadow: 0 0 2px #333;
}

.RION3MenuTitle {
    color: Gray;
    background: #F7F8F9;
    padding: 2px 4px;
    margin: 1px;
    font: 16px Roboto, Arial, sans-serif;
}

.RION3Menu {
    color: #3C3C3C;
    background: #FEFEFE;
    font: 14px Roboto, Arial, sans-serif;
}

.RION3MenuIconColumn {
  background: #FEFEFE;
}

.RION3MenuItem {
    text-decoration: none;
    white-space: nowrap;
    color: Black;
    border-width: 0px;
    padding: 2px 4px;
    margin: 1px;
    display: block;
    cursor: default;
    outline: none;
    font: 14px Roboto, Arial, sans-serif;
}

.RION3MenuItemHover {
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAIAAACOpGH9AAAAFklEQVR42mP48uUrEwPDfyYGBgZqYgBOiwQHUtuwlwAAAABJRU5ErkJggg==') repeat-x top #f4f4f4;
   border-width: 0px;
   padding: 2px 4px;
   margin: 1px;
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
}


/*Text der Startseite*/

.main {
  width: 100%;
  min-height: 190px;
  margin-top: 16px;
  margin-left: 15px;
  background-color: white;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 35px;
  padding-right: 40px;
  border-radius: 5px;
}

.main h1 {
    font-size: 33px;
    font-weight: bold;
    font-family: Roboto, Arial, sans-serif;
    margin-bottom: -15px;
}


.main h3 {
    font-size: 24px;
    font-weight: normal;
    font-family: 'Roboto', Arial, sans-serif;
}

.main p {
    margin-bottom: 2px;
}

.main .bodytext {
    font-family: Roboto, Arial, sans-serif;
    font-size: 16.2px;
    width: 600px;
}


#TitUe1 {
    font-size: 30px;
    font-weight: bold;
    font-family: Roboto, Arial, sans-serif;
    margin-bottom: -15px;
    letter-spacing: 0.03em;
}


#TitUe2 {
    font-size: 22px;
    font-weight: bold;
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.02em;
}

#kurzinfo {
font-family: 'Roboto', Arial, sans-serif; 
font-size: 16px;
color: #4A4A4A; 
line-height: 1.5;
margin-top: 30px;
letter-spacing: 0.02em;
list-style: disc;           /* oder 'none' */
padding-left: 1.2rem;       /* Einzug für Bullets */
}

#kurzinfo li { margin: .35rem 0; }


:root{
  --ink:#1e2530; --muted:#667085;
  --bg:#ffffff; --panel:#ffffff;
  --ring:rgba(194,28,22,.18);
  --accent:#a12323; --accent-600:#801818;
}

.rida-hero{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items:center;
  background:var(--panel);
  border-radius:10px;
  box-shadow: 0 8px 24px rgba(16,24,40,.06);
  padding:24px 28px;
}

.rida-hero__copy{max-width: 920px;}
.rida-claim{
  margin:0 0 18px 0;
  font:700 24px/1.15 Roboto,Arial,sans-serif;
  color:var(--ink);
}
.rida-claim span{white-space:nowrap;}

.rida-features{list-style:none; margin:25px 0 0; padding:0; display:grid; gap:14px;}
.feat{display:grid; grid-template-columns: 36px 1fr; gap:12px; align-items:flex-start;}

.feat__icon{
  width:36px; 
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f3f4f6;
  opacity: 0.8;
}
.feat__icon svg{width:20px; height:20px; fill:#3b4252;}

.feat__title{font-weight:700; color:var(--ink); margin-bottom:2px;}
.feat p{margin:0; color:#2f3a4a; line-height:1.5;}

.text-link{color:#0b72e7; text-underline-offset:2px;}
.text-link:hover{color:#075ec0;}

.rida-hero__cta{display:grid; place-items:center; padding-right:6px;}
.cta-circle{
  display:grid; place-items:center; width:142px; height:142px; border-radius:999px;
  background:var(--accent); color:#fff; text-decoration:none; text-align:center;
  box-shadow: 0 10px 26px rgba(161,35,35,.35);
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
}
.cta-circle:hover{background:var(--accent-600); transform: translateY(-1px);}
.cta-circle:focus-visible{outline:none; box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--ring);}

@media (max-width: 960px){
  .rida-hero{grid-template-columns: 1fr; gap:22px;}
  .rida-hero__cta{justify-content:flex-start;}
}


/*Aufruf des chatbots von index1a.a5w */

#open-assistant, #open-beispiele, #open-beispiele-ki, #open-kidialog {
  display: inline;            /* wichtig: NICHT block/inline-block */
  color: inherit;                              /* keine Extra-Farbe */
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .15s ease, text-decoration-thickness .15s ease;
}

#open-assistant a:hover, #open-beispiele a:hover, #open-beispiele-ki a:hover, #open-kidialog a:hover, 
#open-assistant a:focus-visible, #open-beispiele a:focus-visible, #open-beispiele-ki a:focus-visible, #open-kidialog a:focus-visible {
  text-decoration-thickness: 2px;
  text-decoration-color: #43a047;              /* dein Akzentgrün */
  outline: none;
}

.container1 {
    display: flex;
    align-items: flex-start;
    margin-top: -20px;
    gap: 50px; /* Abstand zwischen dem Textfeld und dem Punkt */
    margin-bottom: 0px;
}

.text-field {
    display: block;
    flex:1 1 80%;
 }

.button-container {
    display: flex;
    flex-direction: column; /* Buttons untereinander anordnen */
    align-items: center; /* Buttons ausrichten */
    gap: 10px; /* Abstand zwischen den Buttons */
}

.registration-button {
display: inline-block;
    width: 135px;
    height: 135px;
    background-color: #a12323; /*#ec2e38; #a62440; #a12323;*/
    color: white;
    font-family: 'Roboto', Arial, sans-serif;  
    font-size: 16px;
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    margin-top: -20px;
    text-decoration: none;
}

.container1 a {
	text-decoration: none;
}

/* "Was ist neu?" Button */
#show-popup {
  right: 20px;
  background: #a12323;
  color: white;
  padding: 5px 20px;
  border-radius: 3px;
  border: none;
  margin-top: 5px;       
  cursor: pointer;
  width: fit-content;
}

#show-popup:hover {
    background: #801818;
}


/* Elemente für Judikatur */
.flex-grid {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 900px; /* Maximale Breite des Flex-Grids */
}

.grid-item {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: calc(50% - 20px); /* Zwei Elemente pro Zeile */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.grid-item h1 {
  font-size: 16px;
  line-height: 1;
  font-family: Robot, Arial, sans-serif;
  margin-bottom: 5px;
}

.grid-text {
  font-size: 14px;
  line-height: 1.4;
  font-family: Roboto, Arial, sans-serif;
  margin-bottom: 5px;
 letter-spacing: 0.02em;
}


.left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Grafik und den Text untereinander */
    text-align: center; /* Zentriert den Text */
}

.image {
    max-width: 100%; /* Passt die Grafikgröße an den Container an */
    height: auto;
}

.right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.flex-grid1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten-Layout */
    gap: 10px; /* Abstand zwischen den Elementen */
    margin-bottom: 10px;
}

.grid-item1 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Grafik und den Text untereinander */
    text-align: center; /* Zentriert den Text */
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.grid-item1:hover {
    cursor: pointer;
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

.grid-item1 h1 {
  font-size: 14px;
  font-style: italic;
  font-weight: normal;
  line-height: 1;
  font-family: Roboto, Arial, sans-serif;
  margin-bottom: 20px;
}

.oben {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center; /* Zentriert die Grafik vertikal */
    justify-content: center; /* Zentriert die Grafik horizontal */
}

.oben2 {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center; /* Zentriert die Grafik vertikal */
    justify-content: left; /* Zentriert die Grafik horizontal */
}

.grid-image {
    max-width: 100%; /* Passt die Grafikgröße an den Container an */
    height: auto;
}

.grid-image1 {
    display: grid;
    justify-self: start;
    max-width: 100%; /* Passt die Grafikgröße an den Container an */
    height: auto;
    opacity: 0.5;
}

.grid-image-text {
    margin-left: 20px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.02em;
}

.unten {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    text-align: left;
    flex-grow: 1;
    position: relative; /* Ermöglicht die Positionierung des Links innerhalb des Containers */
 }

.bottom > *:not(.LS-link) {
    margin-bottom: 10px; /* Abstand zwischen den Textabsätzen */
}

.LS-link {
  margin-top: auto; /* Schiebt den Link ganz nach unten */
  align-self: flex-end; /* Richtet den Link rechtsbündig aus */
  font-size: 12px;
  line-height: 1;
  font-family: Roboto, Arial, sans-serif;
  text-decoration: none; /* Entfernt die Unterstreichung des Links */
  color: #4a576d; /* Farbe des Links */
}



.rion_linkwrapper {
	margin: 30px 15px 20px;
}

.rion_linkwrapper div {
	display: inline-block;
	padding: 3px 30px;
	font-family: 'Roboto', Arial, sans-serif;
	color: #000;
}


/*Popup für Infos über Neuerungen */

        #popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        /* Popup-Fenster */
        #popup {
            background: white;
            padding-top: 20px;
            padding-bottom: 40px;
            padding-left: 50px;
            padding-right: 50px;
            width: 500px;
            font-family: Roboto, Arial, sans-serif;
	    font-size: 13px; 
            border-radius: 3px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            animation: fadeIn 0.3s ease-in-out;
        }

         #popup h2 {
            padding: 5px; /* Mehr Einzug */
         }

         #popup ul {
            list-style: none; /* Entfernt die Punkte */
            padding-left: 20px; /* Mehr Einzug */
            line-height: 1.6; /* Größere Zeilenhöhe für bessere Lesbarkeit */
            font-size: 15px; /* Größere Schriftgröße */
            text-align: center; /* Linksbündig ausgerichtet */
            display: inline-block; /* Zentriert die gesamte Liste */
            border: 1px solid #e0e0e0; /* Sehr hellgrauer Rahmen */
            padding: 10px; /* Innenabstand */
            border-radius: 5px; /* Abgerundete Ecken */ 
       }

        /* 🚀 Kleine Punkte (Knödel) vor jedem Listenelement */
        #popup ul li {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center; /* Inhalt mittig ausrichten */
            gap: 8px; /* Abstand zwischen Punkt & Text */
        }

        #popup ul li::before {
            content: "•"; /* Der Punkt */
            font-size: 16px; /* Größe des Punkts */
            color: #a12323; /* Farbe passend zu deinem Design */
        }


        /* Schließen-Button */
        #close-popup {
            background: #b3b3b3;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 3px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 70%;
        }

        #close-popup:hover {
            background: #808080;
        }

        /* Video-Button */
        #watch-video {
            background: #a12323;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 3px;
            margin-top: 25px;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 70%;
        }

        #watch-video:hover {
            background: #801818;
        }

        /* Fade-in Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }


/*Login overlay */

#RIONLogin{
color:white;
position:relative;
float: right;
top: 3px;
right: 10px;

}

.RIONLoginLink{
color:white;
}

.overlay{
	position: absolute;
	top:0;left:0;
	width:100%;height:100%;
	opacity: 0.5;
	background:black;
	z-index:100;
}
.overlay_box{
	background: white;
	height: 350px;
	width: 570px;
	padding-left: 40px;
	font-family: Roboto, Arial, sans-serif;
	font-size: 13px;
	padding-top:18px;
	z-index:101;
	position:absolute;
	left:50%;
	margin-left:-340px;
	top:50%;
	margin-top:-170px;
}

.overlay_box h1{
	font-size: 28px;
	font-weight: bold;
	font-family: Roboto, Arial, sans-serif;
        letter-spacing: 0.02em;
	margin:0;
}
.overlay_box h3{
	font-size: 18px;
        letter-spacing: 0.02em;
	font-weight: normal;
	font-family:Roboto, Arial, sans-serif;
	margin-top: 2px;
        margin-bottom: 15px;
}
.overlay_box h4{
	font-size: 15px;
	font-family:Roboto, Arial, sans-serif;
	font-weight: normal;
	color:#c2311b;
}

.RIInputKnopf {
    position: absolute;
    right: 50px;
    top: 130px;
}

.RILoginInput {
  height: 35px;
  width: 270px;
  color: #3C3C3C;;
  background-color: #fcfcfc;
  font-family:Roboto, Arial, sans-serif;
  font-size: 16px;
  border-style: solid;
  border-width: 1px;
  border-color: #ADAAAA;
  margin-bottom: 6px;
  margin-top: 4px;
  padding-left: 10px;
}

.RILoginVergessen {
  position: relative;  
  top: 10px;
}

.RILoginButton {
  color: white;
  background-color: #a12323; /*#ec2e38; #a62440; #a12323;*/
  font-style: normal;
  font-size: 15px;
  font-family: Roboto, Arial, sans-serif;
  height: 35px;
  width: 144px;
  margin-top: 4px;
  margin-bottom: 6px;
  outline: none;
  border: none;
  box-shadow: 0 0 0 1px #ADAAAA; /* Ersetzt die border mit einem "Schatten"-Rand */
  cursor: pointer;
}


/* Farbwechsel beim Drücken */
.RILoginButton:active, .RILoginButton:focus {
  background-color: #7d1b1b;
}

.overlay_box .RILoginButtonHover, .overlay_box .RION3ButtonHover {
 background: #a12323; /*#ec2e38; #a62440; #a12323;*/
 border-radius: 0px;
}

.overlay_box .closebox{
	background:url("../images/overlayx.png");
	height: 32px;
    width: 35px;	
	position: absolute;
    right: 0px;
	cursor:pointer;
	top:0px;
}



.scrollup{
    width:30px;
    height:30px;
    position:fixed;
    bottom:50px;
    right:55px;
    display:none;
    opacity: 0.4;
}


#RION3Steuerung {
  color: #3C3C3C;
  background: #f9f9f9;
  font-size: 17px;
  font-family: Roboto, Arial, sans-serif;
  margin-top: 16px;
  margin-right: 30px;
  padding-bottom: 7px;
  border-style: solid;
  border-radius: 5px;
  border-width: 3px;
  border-color: #efeff0;
  width: 100%;
  -webkit-user-select: text; /* Für Safari und Chrome */
  -moz-user-select: text;    /* Für Firefox */
   user-select: text;         /* Standard */
  margin-left: 0px;
  right: auto;
  flex-shrink: 0;
}

/*Ergebnisliste */

#RION3InhSteu {
  max-width: 1500px;
  background-color: #f9f9f9;
  -webkit-user-select: text; /* Für Safari und Chrome */
  -moz-user-select: text;    /* Für Firefox */
   user-select: text;         /* Standard */
   display: flex; /* Ermöglicht flexible Anordnung */
   flex-direction: column; /* Stapelt div2 und div3 vertikal */
}


#RION3Inhalt {
  width: 100%;
  background-color: #f9f9f9;
  overflow-x: hidden;
  -webkit-user-select: text; /* Für Safari und Chrome */
  -moz-user-select: text;    /* Für Firefox */
   user-select: text;         /* Standard */
  margin-left: 0px;
  right: auto;
  overflow-y: auto;
  overflow-x: hidden;
  /*overflow-y: scroll;  Ermöglicht nur vertikales Scrollen */
  flex-grow: 1; 
}


.RION3Grid2 {
   color: #3C3C3C;
   font-size: 15px; /*.9rem 15.3px; */
}

.RION3GridData2 {
   color: #3C3C3C;
   font-size: 15px; /*.9rem; 15.3px; */
   line-height: 1.4;
   background-color: #FFF; 
   padding-left: 5px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom:  #f9f9f9; 
   border-bottom-width: 5px;
   border-bottom-style: solid;
   border-radius: 0px;
   letter-spacing: 0.02em;
}

tr:not(.RION3GridRowSelected) td.RION3GridData {
  background: #ffffff;
  border-width: 0;
  padding-top: 12px;
padding-left: 7px;
  padding-bottom: 8px;
}

tr.RION3GridRowSelected td.RION3GridData  {
  color: white;
  background: #71777f;
  border-width: 0;
  padding-top: 12px;
padding-left: 7px;
  padding-bottom: 8px;
}

.RION3GridRowSelected {
  color: white;
  background: #71777f;
  border-width: 0;
  padding-top: 12px;
  padding-bottom: 8px;
}

.RION3GridSeparator {
  background-color: #EFEFF0;
  font-size: 0px;
  height: 1px;
}

.RION3Edit[type=checkbox], RION3GridHeader[type=checkbox] {
   height: auto;
   border: 0 none;
   padding-left:10px;
   width:20px;
   margin-left: -1px;
   margin-right: -7px;
   background-image:none;
   opacity: 0.6;
}


.RION3ButtonNavi {
  text-align: center;
  background: none;
  font: 17px Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: 26px !important;
  height: 26px !important;
  margin-top: -5px;
  line-height: 1.5;
}

.RION3ButtonNavi.active {
   color: #a12323; /*#ec2e38; #a62440;*/
   font-weight: bold;
   background-color: #efeff0;
   border-radius: 50%; /* Macht den Kreis rund */
}


.RION3ButtonNaviImg {
  margin-top: -3px;
  height: 26px;
  width: 26px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
  opacity: 0.5;
}


/*Flex-Container RION2ToolbarV */
/* Flex-Container */
.NaviV-container {
  display: grid; /* Aktiviert Grid-Layout */
  grid-template-columns: 0 30% 1fr 30%; /* Spaltenaufteilung */
  align-items: center; /* Vertikale Zentrierung für alle Elemente */
  width: 100%; /* Volle Breite */
  height: 40px; /* Beispielhöhe */
  gap: 0px; /* Abstand zwischen den Spalten */
}

/* Linker Bereich */
.NaviV-item-left {
  display: grid; /* Aktiviert Grid innerhalb der linken Spalte */
  height: 40px;
  grid-template-rows: auto auto; /* Zwei Zeilen für die beiden Elemente */
  gap: 0px; /* Abstand zwischen den Zeilen */
  align-items: start; /* Elemente am oberen Rand ausrichten */
  justify-items: start; /* Links ausrichten */
}

/* Mittlerer Bereich */
.NaviV-item-center {
  display:flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
  text-align: center; /* Zentrierter Text (falls nötig) */
}

/* Rechter Bereich */
.NaviV-item-right {
  display: grid; /* Grid-Layout innerhalb der rechten Spalte */
  grid-template-columns: auto 1fr; /* Zwei Spalten: Bilder links, Buttons rechts */
  align-items: center; /* Vertikale Zentrierung */
  gap: 0px; /* Abstand zwischen Bildern und Buttons */
}

/* Bilder links im rechten Bereich */
.NaviV-right-images {
  display: flex; /* Flexbox für Bildergruppe */
  gap: 0px; /* Abstand zwischen Bildern */
  align-items: center; /* Vertikale Zentrierung */
  justify-self: start; /* Links ausrichten */
}

/* Buttons rechts im rechten Bereich */
.NaviV-right-buttons {
  display: flex; /* Flexbox für Buttonsgruppe */
  gap: 0px; /* Abstand zwischen Buttons */
  align-items: center; /* Vertikale Zentrierung */
  justify-self: end; /* Rechts ausrichten */
}


.zurKurzanzeige {
  color: #a12323; /*#ec2e38; #a62440;*/
  font-style: normal;
  font-size: 12px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  margin-left: 10px;
  letter-spacing: 0.02em;
}


#NaviV-left-item-1 {
  position: relative;
  top: -5px;
  left: 0px;
}

#NaviV-left-item-2 {
  position: relative;
  top: -7px;
  left: 0px;
}



select[id="RION2TOOLBARV.V.R1.SORTIERUNGV"] {
  height: 26px !important;
}

.RIToolbarImage {
  cursor:pointer;
  height: 32px;
  width: 32px;
  margin-right: 8px;
  margin-left: 0px;
  margin-bottom: 0px;
  margin-top: 4px;
  opacity: 0.4;
}

.RIToolbarButt{
  color: #3C3C3C;
  background-color: #FFF;
  font-style: normal;
  font-size: 15px;
  font-family: Roboto, Arial, sans-serif;
  height: 30px;
  margin-top: 4px;
  margin-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow: 0 0 0 1px #efeff0; /* Ersetzt die border mit einem "Schatten"-Rand */
  cursor: pointer;
}

.RION3Button{
  color: #3C3C3C;
  background-color: #FFF;
  font-style: normal;
  font-size: 15px;
  font-family: Roboto, Arial, sans-serif;
  height: 25px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 3px;
  padding-bottom: 7px;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow: 0 0 0 1px #efeff0; /* Ersetzt die border mit einem "Schatten"-Rand */
  cursor: pointer;
}


.RION3RIGridHeader {
  color: #a12323; /*#ec2e38; #A62440;*/
  background: #FFF;
  font-size: 15px;
  font-family: Roboto, Arial, sans-serif;
  padding-top: 16px;
  padding-left: 5px;
  padding-bottom: 16px;
  height: 40px;
  border-bottom: #f9f9f9; 
  border-bottom-width: 5px;
  border-bottom-style: solid;
} 

select.RION3Edit {
  color: #3C3C3C;
  background-color: #FFF;
  font-style: normal;
  font-size: 15px;
  font-family: Roboto, Arial, sans-serif;
  padding-left: 10px;
  margin-left: 5px;
  margin-top: 4px;
  margin-bottom: 6px;
  vertical-align: middle;
  width: 291px;
  height: 30px;
  border-radius: 5px;
  border-width: 1px;
  border-color: #efeff0;
  cursor: pointer;
} 

/*Grid Gesetzesanzeige */
.RION3GeGrid {
   color: #3C3C3C;
   margin-top: 16px;
   width: 100%;
}

.RION3GeGridNavi {
  color: #3C3C3C;
  background: #f9f9f9;;
  font-size: 17px;
  font-family: Roboto, Arial, sans-serif;
  padding-bottom: 16px;
  border-style: solid;
  border-radius: 5px;
  border-width: 3px;
  border-color:#efeff0;
} 


.RION3GeGridNavi a, .RION3GeGridNavi span {
  margin-left: 8px;
  text-decoration: none;
}

span[id="RION2GE.CURRENTPAGE"] {
  color: #a12323; /*#ec2e38; #a62440;*/
  font-weight: bold;
  background-color: #efeff0;
  border-radius: 50%;
}


.RION3GeGridNavi img {
  position: relative;
  top: 9px;
  height: 30px;
  width: 30px;
  margin-right: -1px;
  margin-left: -5px;
  opacity: 0.5;
}

.RION3GeGridNavi a img {
  position: relative;
  top: 9px;
  height: 30px;
  width: 30px;
  margin-right: -1px;
  margin-left: -5px;
  opacity: 0.5;
}

.RION3GeGridHeader {
  color: #a12323; /*#ec2e38; #A62440;*/
  background: #FFF;
  font-size: 15px;
  font-family: Roboto, Arial, sans-serif;
  padding-top: 16px;
  padding-left: 20px;
  padding-bottom: 16px;
  height: 40px;
  border-bottom: #f9f9f9; 
  border-bottom-width: 5px;
  border-bottom-style: solid;
} 

.RION3GeLink > :first-child {
  color: #a12323; /*#ec2e38; #A62440;*/
  font-size: 15px;
}

.RION3GeGridData {
   color: #3C3C3C;
   font-size: 15px; /*.9rem; 15.3px; */
   line-height: 3;
   background-color: #FFF; 
   padding-left: 20px;
   border-bottom:  #f9f9f9; 
   border-bottom-width: 5px;
   border-bottom-style: solid;
   border-radius: 0px;
   letter-spacing: 0.02em;
}


/* Volltextanzeige */

.RIVollGrid {
   width: 220px;
   vertical-align: top;
   color: #3C3C3C;
   font-size: 15px; /*.9rem; 15.3px; */
   line-height: 1.3;
   background-color: #FFF; 
}

.VollGridWrapper {
  width: 220px;
  background-color: #FFF; 
  border-style: solid;
  border-radius: 5px;
  margin-top: 16px;
  border-width: 3px;
  border-color: #efeff0;

}

.RIIndex {
  background: #FFF;
  border-style: solid;
  border-radius: 5px;
  border-width: 3px;
  border-color: #efeff0;
  margin-top: 16px;
  margin-left: 15px;
  margin-right: 10px;
}

#VT3 {
 padding-left:25px;
 padding-right:25px;
 padding-top: 0px;
 background: #FFF;
  border-style: solid;
  border-radius: 5px;
  border-width: 3px;
  border-color: #efeff0;
  margin-top: 50px;
  margin-left: 15px;
  margin-right: 10px;
}


#RION2VOLL_LCS_VOLLTEXTE.TABBAND{
    display: flex;
    border-bottom: 2px solid #ccc;
}

.RION3TabTButton{
position: relative;
display: inline-block;
    padding: 5px 25px;
    background-color: #FFFFFF; /* Hellere Farbe für inaktive Tabs */
    border-style: solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-width: 3px;
    border-color: #efeff0;
    border-bottom: none;
    cursor: pointer;
text-decoration: none;
    margin-top: 10px;
    margin-left:-3px;
    top:-42px;
}

.RION3TabTButtonSelected{
position: relative;
display: inline-block;
    background-color: #f9f9f9; /* Dunklere Farbe für den aktiven Tab */
    border-style: solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-width: 3px;
    border-color: #efeff0;
    border-bottom: none;
    cursor: pointer;
text-decoration: none;
    margin-top: 2px; /* Erhöht den aktiven Tab */
    margin-left:-5px;
    padding: 9px 20px; /* Größeres Padding für mehr Höhe */
    top: -42px;
}

.RION3TabTButton:hover {
  border-color: #efeff0;
}

#RION2VOLL_LCS_VOLLTEXTE\.1\.TAB::after {
  content: "✦ AI";
  position: absolute;
  top: -18px;
  right: -15px;
  background: linear-gradient(135deg, #8B6FD4, #C54040);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 7px;
  border-radius: 4px;
}



.HighlightVT {
color: #a12323; /*#ec2e38; #a62440; #a70d0c;*/
background-color:#e7d7d5;
font-weight: bold;
}


.VollU1{
font-family: Roboto, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1;
color: #a12323; /*#ec2e38; #a62440; #a70d0c;   #7F1410;*/
text-align: left;

}

.VollU1Abstand {
font-family: Roboto, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #a12323; /*#ec2e38; #a62440; #a70d0c;#7F1410; #672222;*/
text-align: left;
padding-bottom: 20px;
}

.RION3TextU2 {
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #3C3C3C; 
}

.RION3TextU4 {
  color: #3C3C3C;
  font-weight: bold;
}

.infotext {
    font-size: 15px;
    line-height: 23px;
    margin-left: 105px;
    margin-top: -20px;
    padding-bottom: 10px;
    letter-spacing: 0.02em;
}

.Zusammenfassung {
   font-size: 15px;
   line-height: 23px;
    margin-left: 0px;
    margin-top: 10px;
    background-color: #f6f6f6;  
    padding-top:15px;
    padding-left:20px;
    padding-right:10px;
    padding-bottom:20px;
    letter-spacing: 0.02em;
}

#LSKIInfo {
   display: inline-block;
   margin-top: 3px;
   font-size: 13px;
}

.detail_header {
    margin-left: 39px;
   font-family: Roboto, Arial, sans-serif;
}

.detail_wrapper {
  width: 100%;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  background-color: #FFFFFF;
}

.shadow_detail {
    background: url("../images/shadowdetail.png") repeat scroll 0 0 transparent;
    height: 4px;
    margin-top: 37px;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.Voll3Data, .Voll4Data {
    background: none repeat scroll 0 0 #FFFFFF; /* #F2F2F0; /*#F1F1ED;*/
    height: 100%;
    position: relative;
    width: 100%;
}


.VollLit {
    background: #FFFFFF;
    padding-bottom: 5px;
    line-height: 1.45;
    font-family: Roboto, Arial, sans-serif;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.02em;
}

/* KI-Zusammenfassung Erste Ebene ul */

#KIInfo {
  flex-direction:column;    /* Zeilen untereinander */
  align-items:center;       /* nun horizontal zentriert */
  justify-content:center;   /* vertikal, wenn Höhe > Inhalt */
  text-align:center;
   font-family: "Roboto", Arial, sans-serif;
   font-size: 15px;
   font-weight: 500;
   margin-bottom: 8px;   /* kleiner Abstand zu den Punkten */
   color: #3C3C3C;       /* gleiche Farbe wie Punkte */
   background: #FFFFFF;  /* gleiches Weiß wie der Dots-Container */
}

.dots {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   margin-bottom: 20px;
   background: #FFFFFF;
}

.dot {
   width: 6px;
   height: 6px;
   margin: 0 5px;
   background-color: black;
   border-radius: 50%;
   opacity: 0;
   animation: blink 1.5s infinite;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.3s; }
.dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes blink {
   0%, 100% { opacity: 0; }
   50% { opacity: 1; }
}    

td#KurzKI.VollLit ul {
    margin-left: 15px;
    margin-top: 5px;
}

td#KurzKI.VollLit > ul > li {
    margin-top: 15px;
}

#KurzKITitel {
display: block;
background: #FFFFFF;
font-family: Roboto, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #3C3C3C; 
letter-spacing: 0.02em;
padding-top: 10px;
}

#KurzKIHinweis{
  display: block;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  color: #3C3C3C;
  letter-spacing: 0.02em;
  margin-top: 20px;
  margin-left: 15px;
  margin-bottom: 20px;
  position: relative;  /* ← NEU: für absolute Positionierung */
  min-height: 80px;  /* ← NEU: Mindesthöhe für Zentrierung */
}

#KurzKIAbstand{
  background: #FFFFFF;
  display: block;
}

.Bewertung {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* ← zurück zu flex-start */
    gap: 10px;
    padding: 10px;
}

.Bewertung-links {
    display: flex;
    gap: 1px;
    flex: 0 0 auto;
    align-items: center;
}

.Bewertung-image {
   margin-right: 20px;
   height: 20px;
   width: 20px; 
   cursor: pointer;
   opacity: 0.7;
}

.vollrecherche-bereich {
    position: absolute;  /* ← NEU: absolute Positionierung */
    right: 25px;  /* ← NEU: rechts mit Abstand */
    top: 50%;  /* ← NEU: vertikal zentrieren */
    transform: translateY(-50%);  /* ← NEU: exakte Zentrierung */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.vollrecherche-text {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    text-align: right;
    font-weight: bold;
}

.vollrecherche-button {
    padding: 8px 16px;
    background-color: #a12323;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}

.vollrecherche-button:hover {
    background-color: #7a1a1a;
}

/* Folgefragen-Container bleibt fix unten */
#AuswertungText{
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}

#ki-bottom{
  margin-top: auto;
  flex: 0 0 auto;
}

#ki-footer{
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #e6e9ef;
}


#folgefragen-bereich{
  position: static;      /* oder einfach weglassen */
  margin-top: auto;      /* <- das ist der eigentliche "nach unten" Trick */
  background-color: #fff;
  padding-top: 12px;
  margin: 20px 40px;
  z-index: 10;           /* kann bleiben, ist aber meist nicht nötig */
  }
/* Wrapper bleibt wie gehabt */
.folgefrage-antwort {
    margin: 20px 0;
    padding: 0;              /* padding raus, damit Header-Bubble "frei" wirkt */
    border-radius: 4px;
   -webkit-user-select: text !important; /* Safari/iOS */
   -moz-user-select: text !important;    /* Firefox */
   -ms-user-select: text !important;     /* alte Edge/IE */
   user-select: text !important;         /* Standard */
}

/* HEADER als User-Bubble rechts */
.folgefrage-header {
    display: inline-block;   /* damit es wie eine Bubble wirkt */
    float: right;            /* rechts ausrichten */
    clear: both;             /* neue Zeile beginnen */
    max-width: 72%;

    font: 15px/1.5 Roboto, Arial, sans-serif;
    color: #111;
    letter-spacing: 0.02em;

    background: #f1f3f5;
    border: 1px solid #e6e9ef;
    border-radius: 16px;
    border-top-right-radius: 6px;

    padding: 10px 12px;
    margin: 0 0 10px 0;

    /* dein bisheriges "Divider"-Aussehen entfernen */
    border-bottom: none;
}

/* CONTENT normal, links, unterhalb der Bubble */
.folgefrage-content {
    clear: both;             /* sorgt dafür, dass Content unter der rechts-floatenden Bubble startet */
    font: 15px/1.5 Roboto, Arial, sans-serif;
    letter-spacing: 0.02em;
    color: #111;
    padding: 20px 40px;           /* normaler Abstand für die Antwort */
    background: transparent; /* bleibt "normal" */
}

.folgefrage-content p {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
    line-height: 1.5;
    color: #222222;
}

.folgefrage-content ul {
    margin-left: 32px;
    line-height: 1.5;
    color: #222222;
    margin-bottom: 5px;
}

/* Container: sieht aus wie das Erstfrage-Feld */
.folgefragen-eingabe{
  position: relative;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 22px;              /* Chip-Optik */
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Textarea: ohne eigenen Rahmen, damit der Container das "Feld" ist */
.folgefragen-textarea{
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  background: transparent;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  padding: 14px 70px 14px 16px;     /* rechts Platz für Button */
  min-height: 84px;
  resize: vertical;
  border-radius: 22px;              /* damit Ecken sauber sind */
}

.folgefragen-textarea::placeholder {
  font-family: Roboto, Arial, sans-serif;
  font-size: 15px;
  color: #8a8a8a;
  opacity: 1; /* wichtig für manche Browser */
}


/* Button unten rechts im Feld (wie dein Erstfrage-Button) */
.folgefragen-button{
  position: absolute !important;
  right: 10px;
  bottom: 10px;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;

  transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

.folgefragen-button:active{
  transform: translateY(1px);
}

.folgefragen-button:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Hellgrauer Kreis im Button */
.folgefragen-iconbubble{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #eef1f4;              /* hellgrau wie im Screenshot */
  display: grid;
  place-items: center;
  transition: background-color .18s ease;
}

/* Hover: minimal */
.folgefragen-button:hover .folgefragen-iconbubble{
  background: #e6eaee;
}

/* Icon rot */
.folgefragen-button .mi{
  color: #a12323;
  font-size: 26px;                  /* etwas größer wirkt wie im Screenshot */
}

.folgefragen-buttons {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: relative;
}
.folgefragen-optionen-btn {
  padding: 6px 12px;
  border: 1px solid #d0d6e0;
  border-radius: 8px;
  background: #f5f7fa;
  color: #3a4252;
  font: 500 12px/1.2 Roboto, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.folgefragen-optionen-btn:hover {
  background: #eaecf2;
  border-color: #b8bfcc;
}
.folgefragen-optionen-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid #dde2ea;
  border-radius: 10px;
  padding: 4px;
  min-width: 240px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.folgefragen-optionen-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-radius: 7px;
  background: none;
  font: 400 13px/1.3 Roboto, Arial, sans-serif;
  color: #1f2a37;
  cursor: pointer;
}
.folgefragen-optionen-menu button:hover {
  background: #f0f4fa;
}



/* ---------- Footer: Bewertung + Vollrecherche sauber unten ---------- */

#ki-footer{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bewertung: links Icons, rechts Vollrecherche */
#ki-footer .Bewertung{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;            /* falls global margins */
  padding: 0;
}

/* Icon-Leiste links */
#ki-footer .Bewertung-links{
  display: flex;
  align-items: center;
  gap: 0px;
}

/* Vollrecherche rechts – im normalen Fluss, nicht "schwebend" */
#ki-footer .vollrecherche-bereich{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  position: static !important;
  float: none !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
}

/* Button selbst: sicherstellen, dass er nicht absolut/float ist */
#ki-footer .vollrecherche-button{
  position: static !important;
  float: none !important;
}

/* Optional: auf schmaleren Screens untereinander */
@media (max-width: 900px){
  #ki-footer .Bewertung{
    flex-direction: column;
    align-items: stretch;
  }
  #ki-footer .vollrecherche-bereich{
    margin-left: 0;
    justify-content: space-between;
  }
  #ki-footer .vollrecherche-button{
    width: 100%;
  }
}



.VollLitButton {
    padding-bottom: 5px;
    cursor:pointer;
}

.RION3VTAbsatz {
  color: #3C3C3C;
  font-weight: normal;
  line-height: 1.45;
  font-size: 15px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
}

.RION3VTAbsatzBig {
  color: #3C3C3C;
  font-weight: normal;
  line-height: 1.45;
  font-size: 15px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 8px;
}


/*Header für Window */
.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9; /* Typische Windows-Headerfarbe */
    color: #3C3C3C;
    font-family: Roboto, Arial, sans-serif; 
    padding: 10px;
}

.header-text {
    font-size: 16px;
    font-weight: bold;
}

.close-icon {
    width: 25px; /* Größe des X-Icons */
    height: 25px;
    cursor: pointer;
    vertical-align: middle; 
    color: #676565;
    font-size: 25px;
}

.close-icon:hover {
    color: white;    
    background-color: #a12323; /*#ec2e38; #a62440;*/
box-shadow: 0 0 0 10px;
}


/* Tabelle */
.RION3Ueberschrift {
border: 1px dotted #666666;
width: 95%;
padding: 0 0 0 0;
margin: 0 auto;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
font-weight:bolder;
}

.RION3Table {
border: 1px dotted #666666; /*#888585;*/
border-collapse: collapse;
border-spacing: 0px;
width: 95%;
margin: 0 auto;
margin-top: 30px;
}

.RION3TableZi {
border: 1px solid #888585; /*#666666;*/
border-collapse: collapse;
border-spacing: 0px;
width: 95%;
margin: 0 auto;
margin-top: 25px;
}

.RION3TableUZi{
padding-left:4px;
font-family: Roboto, Arial, sans-serif;
font-size: 16px;
font-weight:bold;
color: #666666;
BACKGROUND-COLOR: #f0f0ef;
padding-top:12px;
padding-left:12px;
padding-bottom:11px;
}

.RION3TableUZi1r{
padding-left:4px;
font-family: Roboto, Arial, sans-serif;
font-size: 13px;
BACKGROUND-COLOR: #f0f0ef;
padding-top:8px;
padding-left:5px;
padding-right:10px;
padding-bottom:10px;
text-align:right;
}

.RION3TableUZi1r a {
color: #333333;
}


.RION3TableZi1{
padding-left:4px;
font-family: Roboto, Arial, sans-serif;
font-size: 12px;
padding-top:15px;
padding-left:5px;
padding-bottom:10px;
}

.RION3TableInfoZi {
text-align: left;
color: #000000;
border-style:none;
padding-top:12px;
padding-left:12px;
padding-right:10px;
padding-bottom:10px;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
}

.RION3TableInfoZi1 {
text-align: left;
color: #000000;
line-height: 1.4;
border-style:none;
padding-top:12px;
padding-left:16px;
padding-right:10px;
padding-bottom:10px;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
}



.RION3TableU2{
padding-left:4px;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
font-weight:bold;
BACKGROUND-COLOR: #f0f0ef;
padding-top:12px;
padding-left:20px;
padding-bottom:10px;
}

.RION3TableU3{
padding-left:8px;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight:bold;
}

.RION3TableInfo {
text-align: left;
color: #000000;
border-style:none;
padding-top:10px;
padding-left:20px;
padding-right:1px;
padding-bottom:10px;
font-family: Roboto, Arial, sans-serif;
font-size: 12px;
}

.RION3TableInfo h2 {
font-size:13pt;
color:#333333;
font-weight:bold;
margin:0;
}

.RION3TableInfo ul  {
    margin-top: 10px;
    margin-bottom: 10px;
}

.RION3TableInfo li {
    color: #333333;
    font-size: 11pt;
    list-style-type:square;
}

.RION3Text {
  color: #333333;
  padding-top: 0px;
  padding-left: 39px;
  padding-right: 50px;
  font-family: Roboto, Arial, sans-serif;
  line-height: 1.45;
  font-size: 15px;
  letter-spacing: 0.02em;

}


/* clears the 'X' from Internet Explorer */
input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


/*Gesetzessuche */
#RION3ObenGe {
  float: left;
  clear: both;
  width: 100%;
  background-color: #3b4252; 
  height: 120px;
}

#RION3SucheGe {
  position: relative;
  margin-top: 0px;
  width: 100%;
  font-family: Roboto, Arial, sans-serif;
  color: #3C3C3C;
}

.Gesetz-container {
  display: flex;
  align-items: center; /* Zentriert die Elemente vertikal */
  justify-content: flex-start; /* Erstellt den Abstand zwischen den Elementen */
  padding-top: 30px;
  padding-bottom: 20px;
}

.Gesetz-image-left {
  width: 200px; /* Feste Breite für die Bilder */
  height: auto; /* Höhe passt sich dem Seitenverhältnis an */
  position: relative; 
  cursor: pointer;
  top: 5px;
}

.Gesetz-SucheStarten {
  width: 50px; /* Feste Breite für die Bilder */
  height: auto; /* Höhe passt sich dem Seitenverhältnis an */
  margin-left: 10px;
}

.Gesetz-SucheStarten > :first-child {
  background-color: #3b4252;
  border:none;
}

.Gesetz-Suchfeld {
  flex: 1; /* Macht das Textfeld flexibel */
  max-width: 900px; /* Maximale Breite von 900px */
  min-width: 250px; /* Minimale Breite von 250px */
  margin-left: 20px; 
  padding: 10px;
  border-radius: 22px;
  background-color: #fff;
  outline: none;
  height: 50px;
}