/* Typography imported from Google Fonts */
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;
}

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

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

.shadow {
    /*background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
    height: 100%;
    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: #3B4252; /*#6f889c; #8ca9cf; #a5bdd7; #cfe4fa; #7ea6c3; #026A8F; #3589af;*/
  height: 120px;
  position: sticky;
  width: 100%;
}

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

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


.RI-container {
  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: 30px;
  padding-bottom: 20px;
}

.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-SucheStarten > :first-child {
  background-color:#3b4252;
  border:none;
  top: 2px;
}

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

.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: 100px;
    right: 13px;
    width: auto;
}

.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: 33px;
    font-weight: bold;
    font-family: Roboto, Arial, sans-serif;
    margin-bottom: -15px;
    letter-spacing: 0.03em;
}


#TitUe2 {
    font-size: 24px;
    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;
}

.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: flex;
    flex-direction: column;
    width: 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;
//  -webkit-transform: scale(1.005);
//  transform: scale(1.005);
}

.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 {
  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; //#f9f9f9;
   padding-left: 5px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom:  #f9f9f9; //white;
   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; //white;
  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; //white;
  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; //#f9f9f9;
   padding-left: 20px;
   border-bottom:  #f9f9f9; //white;
   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; //#f9f9f9;
}

.VollGridWrapper {
  width: 220px;
  background-color: #FFF; //#f9f9f9;
  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: "Neu";
    position: absolute;
    top: -18px;
    right: 3px;
    background: #a12323;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
}



.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;  //#EBEAEA; #F2F2F0;  #E5E5E5;
    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 */

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

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

.Bewertung {
   margin-top: 15px;
   margin-left: 10px;
}

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



.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; //#6f889c;  #b4ced1;
  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;
}