@charset "utf-8";

:root {
    --rdla-blau: #1b3a9e;
    --rdla-orange: #ffcc55;
    --rdla-rot: #9e1b3a;
    --rdla-rot-25: #99030044;
    --rdla-grau: #eee;
    --rdla-dgrau: #aaa;
    --rdla-weiss: #fff;
    --rdla-grau2: #9a9a9a;
    --rdla-indigo: #02042e;
    --rdla-indigo-schatten: #06285d;     
    --rdla-indigo-schatten-25: #06285d44;  

    --rdla-mblau: #0026a4;

    --rdla-rot2: #ca465a;
    --rdla-rot3: #9e1b39; // #6d0d27;
    --rdla-rot4: #2d080f;

    --rdla-gruen: #3a9e1b;
    --rdla-gruen1: #3a9e6f;
    --rdla-gruen2: #1b9e80;

    --rdla-gelb: #9e6f1b;
    --rdla-gelb-75: #9e6f1bcc;
    --rdla-gelb-50: #9e6f1b88;
    --rdla-gelb-25: #9e6f1b44;

    /* von https://codepen.io/hexagoncircle/pen/YzZadLx?editors=1100 */
    --space: 0.5rem;
    --space-sm: calc(var(--space) / 2);
    --space-lg: calc(var(--space) * 4);
    
  --font-main: 'Georgia', serif;
  --font-nav: 'Helvetica Neue', sans-serif;    
    
    font-size: 120%;
}

@font-face {
  font-family: 'Merriweather';
  src: url('/Fonts/Merriweather/Merriweather-Light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/Fonts/Inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}


* {
    box-sizing: border-box;
    font-family: "avenier", sans-serif, "Arial", sans-serif, "Verdana", sans-serif, "Times New Roman", serif, "Georgia", serif;
    font-family: var( --font-main ), "avenier", sans-serif, "Arial", sans-serif, "Verdana", sans-serif, "Times New Roman", serif, "Georgia", serif;
}

html {
    font-size: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

head title {
    display: none;
}

header {
    color: #fff;
    height: 4.51rem;
    position: fixed;
    width: 100%;
    z-Index: 990;
    background-color: var( --rdla-indigo-schatten ); 
    transition: all 0.5s;
}

.header1 .nav {
    display: none;
    height: ( 100vh - 5vw );
    position: absolute;
    transition: all 0.5s;
    width: 100vw;
    z-index: -1;
}

.header1 .nav li {
    border-top: 2px solid var( --rdla-indigo-schatten-25 );
    height: 1.6rem;
}

.footer .nav2 li {
   height: 1.6rem;    
}

.footer .nav2 li a, .header1 .nav li a {
    color: #fff;
/*    font-size: 1.375em; */
    font-size: 1.1em;
    font-weight: bold;
    height: 100%;
/*    padding: 10px; */
    text-decoration: none;    
}

.footer .nav2 li a {
        margin-left: 1rem;
}

.footer.grid {
    display: block !important;    
}

.header1 .nav li a:hover {
    background-color: var( --rdla-indigo-schatten-25 );
}

.header2 {
    display: none;
}

.header1 .glocke-container {
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 1rem;
            left: 5rem;
}

.header2 .glocke-container {
            width: 2.5rem;
            height: 2.5rem;
            position: absolute;
            top: 1.5rem;
            left: 10rem;
}

.header2 nav li, .symbole li {
    border-right: white 3px solid;
}

.header2 nav li:last-child, .symbole li:last-child {
    border: unset;
}

.glocke-container:after {
            content: '1';
            position: absolute;
            top: -0.5rem; /* Anpassen, um den Punkt korrekt zu positionieren */
            right: -0.5rem; /* Anpassen, um den Punkt korrekt zu positionieren */
            width: 1rem; /* Breite des Punktes */
            height: 1rem; /* Höhe des Punktes */
            border-radius: 50%; /* Runde Form */
            background: red; /* Hintergrundfarbe */
            color: white; /* Textfarbe */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem; /* Schriftgröße anpassen */
            font-weight: bold; /* Fettschrift für bessere Lesbarkeit */
            z-index: 10; /* Sicherstellen, dass es sichtbar ist */
        }

 .glocke-container img {
            width: 100%;
            height: 100%;
        }
    

body {
    background-color: var( --rdla-indigo-schatten );
    margin: 0;
    max-width: 100vw; /*1024px;*/
    margin-left: auto;
    margin-right: auto;    
    overflow-x: hidden;
    color: white
}

main {
    hyphens: auto;
    padding: 0 0rem;
    background-color: white;
    box-shadow: 2px;
    max-width: 100%;
    border-radius: 10px;
    top: 4.5rem;
    position: relative;    
    transition: all 0.5s;
    color: black;
}

main :target {
  scroll-margin-top: 6.5rem; /* Die Höhe Ihres fixed Headers */
}

.inlinefoto, .hb {
    width: 100vw;
/*    margin: 1rem; */
}

.canter {
    text-align: center;
}

.logo_kr {
    max-height: 4rem;
}

.logo {
    background-color: var( --rdla-indigo-schatten );
    border-radius: 10px;
    display: inline-block;
    margin: 4px 0 0 0.5rem;
/*    padding: 4px;*/
}
.dt_color {
            background-color: var( --rdla-indigo-schatten-25 );
}

    .dt_table {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        max-height: 8rem;
        overflow-y: auto;
        padding-left: 1rem !important;
        margin-left: auto;
        margin-right: auto;
        width: calc( 100% - 2rem ); 
        border: 1px solid black;
        border-radius: 0.5rem;
        position: relative;
        background-color: var( --rdla-indigo-schatten-25 );
    }

/* Hauptbilder hb von https://pixabay.com/de/users/darkmoon_art-1664300/ */
/* Download-Maße: 1280px x 904px */
/* gewählte max-width: 1024px -> erzeugte Höhe: 723.2px */
/* angestrebte Höhe: 607.2px wie beim Bild auf Startseite */
/* überschüssige Höhe: 116px -> oben und unten weg-clippen je: 58px */
.hb { }
/*  {  clip-path: inset(58px 0);
	-webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);	

    max-width: 1024px;
} */

/* h1, h2 {
    color: var( --rdla-rot3 );
    font-weight: bold;
} */

h1, h2 {
color: var( --rdla-indigo );
font-weight: initial;
}

h3 {
    color: var( --rdla-rot4 );
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.275em;
}

h3 {
    font-size: 1.1em;
}

h4 {
    font-size: 1.0em;
}

p {
    font-size: 1em;
    padding-top: 2rem;
  	padding-bottom: 1rem;
}

li {
    font-size: 0.875em;
}

.navimg {
position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: inline-block;
  color: white;
  background-color: var( --rdla-indigo );
  border-radius: 0.4rem;
  height: 3rem;
  width: max-content;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.navimg1 {
    display: inline-block;
    font-size: 1.1rem;
}

.navimg1:hover {
    cursor: pointer;
}

.navimg1 #sw {
        font-size: 2rem;
}

.navimg1 #exp_text {
         font-size: 1.5rem; 
         margin-right:0.5rem;
}

#navcheckbox {
    visibility: hidden;
    display: none;
}

#navcheckbox:checked ~ .nav {
    background-color: var( --rdla-indigo );
    display: block;
    z-index: 11;
}

.bildbeschreibung {
           font-family: Arial, sans-serif; /* Eine klare und weit verbreitete Schriftart */
    font-size: 16px; /* Eine angenehme Größe für die Lesbarkeit */
    color: #333; /* Eine dunkle Schriftfarbe für besseren Kontrast */
    line-height: 1.5; /* Zeilenabstand erhöhen für bessere Lesbarkeit */
    margin: 10px 0; /* Etwas Abstand oben und unten */
    padding: 10px; /* Innenabstand für den Textbereich */
    background-color: #f8f8f8; /* Ein leichter Hintergrund, der den Textbereich hervorhebt */
    border-left: 3px solid  var(--rdla-indigo); /* Ein farbiger Akzent auf der linken Seite für eine visuelle Trennung */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ein leichter Schatten für eine subtile Tiefe */
    max-width: 80%; /* Maximale Breite des Beschreibungsfeldes */
    margin: 20px auto; /* Zentriert den Block und fügt Abstand hinzu */
    transition: all 0.5s;
}

.ocbt {
    background-color: var(--rdla-indigo); /* Hauptfarbe für den Button */
    color: #ffffff; /* Weiße Schriftfarbe für Kontrast */
    padding: 10px 20px; /* Innenabstand */
    font-family: Arial, sans-serif; /* Schriftart */
    font-size: 14px; /* Schriftgröße */
    border: none; /* Keine Rahmenlinie */
    cursor: pointer; /* Cursor-Stil */
    transition: background-color 0.3s ease; /* Animation für den Hover-Effekt */
    box-shadow: 0 2px 4px var(--rdla-indigo-schatten); /* Schatten für Tiefe */
    border-radius: 5px; /* Abgerundete Ecken */
    display: inline-block; /* Damit der Button nicht die volle Breite einnimmt */
    text-align: center; /* Zentriert den Text im Button */
    margin: 3px 1rem;
}

.ocbt:hover {
    background-color: #0056b3; /* Dunklere Farbe beim Überfahren mit der Maus */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Größerer Schatten für Hover-Effekt */
}

.grid {
    display: grid;
    grid-template-rows: auto;
    gap: 0px 0px;
}

.g {
    text-align: center;
    background-color: var(--rdla-indigo );
    border-radius: 20px;
    color: #fff;
    height: 225px;
    margin: 20px auto;
    width: 225px;
}

.g img:hover {
    transform: scale(.9);
}

.g1 { grid-area: g1; }
.g2 { grid-area: g2; }
.g3 { grid-area: g3; }
.g4 { grid-area: g4; }
.g5 { grid-area: g5; }
.g6 { grid-area: g6; }
.g7 { grid-area: g7; }
.g8 { grid-area: g8; }
.g9 { grid-area: g9; }
.g10 { grid-area: g10; } /*  */
.g11 { grid-area: g11; }
.g12 { grid-area: g12; }
.g13 { grid-area: g13; }
.g14 { grid-area: g14; }
.g15 { grid-area: g15; }
.g16 { grid-area: g16; }
.g17 { grid-area: g17; }
.g18 { grid-area: g18; }
.g19 { grid-area: g19; }
.g20 { grid-area: g20; }
.g21 { grid-area: g21; }
.g22 { grid-area: g22; }

.g1 > img {
        width: 100vw;
        max-width: 1024px;
}

/* .g1 > p, .g1 > h2, .g1 > h3, .g1 > h1, .g1 > a, .g1 > ul, .g1 > h4, .g1 > article, .gl > tr {
    padding-left: 1rem;
    padding-right: 1rem; 
} */

.g1 > article > p, .g1 > article > h2, .g1 > article > h3, .g1 > article > h1, .g1 > article > b, .g1 > h1, .g1 > h2, .g1 > article > a, .g1 > ul, .g1 > article > ul, .g1 > article > h4, .gl > tr, #urheberrecht > p , .g1 > p, .g1 > h2, .g1 > h3, .g1 > h1, .g1 > a, .g1 > ul, .g1 > h4, .gl > tr
 { margin-left: 1rem;
  margin-right: 1rem;
  width: calc(100vw - 2rem);   
  max-width: calc( 1024px - 2rem );
  
}

#kontakt main .g1 > h2, #login main .g1 > h2 {
    max-width: calc( 1024px - 4rem );
    width: calc( 100% - 4rem );
}

#symbole {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    max-width: 100%;
}

.symbole {
color: #000;
font-size: 40px;
width: 100%;
}

.symbole  li {
    display: inline-block;
}

.symbole li a {
    text-decoration: none;
}

.symbole .split {
    display: inline-block;
}

article > p {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;	
}

.mid a {
    display: inline;
}

.mid a,
.mid a:visited {
    color: var( --rdla-indigo-schatten );
}

.mid a:hover {
    display: inline;
    text-decoration: none;
}

.mid ul {
    list-style: circle outside url("/");
    background-color: var(--rdla-hblau-10);
/*    padding: 2rem; */
    padding: 0;
    line-height: 2rem;
/*    margin: 20px; */
/*    padding-left: 2rem; */
}

.mid li {
    display: list-item;
    font-size: 16px;
    line-height: 2rem;
    margin: 0;
    padding: 0;
    text-align: left;
    list-style-type: none;
}

#inhalt_ul li {
    padding: 0 1rem 0 1rem;
}

.hand {
    color: var( --rdla-blau );
    display: inline;
    font-size: 30px;
    padding-right: 20px;
}

#produkte {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

#kontakt table {
      border-collapse: collapse;
      width: calc(100% -40px);
      height: 200px; /* Gesamt-Höhe der Tabelle */
      borderRadius: 5px;
      border: 1px  solid #000;
}

#kontakt td,th {
      border: 1px solid #000;
      vertical-align: middle; /* Vertikale Mitte */
      padding: 10px;
}

#kontakt input, #login input {
      width: calc( 100% - 20px ); /* Optional: Eingabefelder füllen die Zelle aus */
      box-sizing: border-box;
      height: 30px; /* Angepasste Höhe des Input-Feldes */
}


#kontakt form, #login form {
    background-color: var( --rdla-gelb-25 );
    display: block;
    margin: 0 auto;
    padding: 40px;
     background-color: var( --rdla-indigo-schatten-25 ); }

#kontakt label {
}

#kontakt input, #login input {
    margin-bottom: 20px;
}

#kontakt select, #login select {
    margin-bottom: 20px;
}

#kontakt textarea, #login textarea {
    background-color: var( --rdla-gelb-25 );
    margin-bottom: 20px;
    min-width: 10rem;
    width: calc( 100% - 20px );
}

.fm_sich_left {
    background-color: var(--rdla-grau);
    color: var(--rdla-dblau);
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
}

.fm_sich_left,
.fm_sich_right {
    display: inline-block;
    margin: 20px;
}

.fm_sich_right {
    margin: 20px;
}

#mi_sel {
    font-size: 20px;
    margin: 10px auto;
}

#zustimmung,
#zustimmung-label {
    display: inline;
}

#zustimmung {
    margin: 20px;
}

#nachricht-button {
    background-color: var(--rdla-gelb-50);
    font-size: 24px;
    margin: 20px;
    padding: 10px;
}

.footer {
    background-color: var(--rdla-dblau);
    color: #fff;
    font-weight: bold;
    margin-top: calc( 20px + 6.5rem );
    max-width: 100vw;
    margin-bottom: 2rem;
}

#footerkontakt {
    width: 100%;
    margin-bottom:5rem;
}

#ufwerts {
    z-index: 109;
}
.epsilon.on {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-name: einblenden;
}

.epsilon {
    background-color: var( --rdla-dblau );
    border: 2.2px solid #fff;
    border-radius: 60px;
    bottom: 65px;
    color: #fff;
    cursor: pointer;
    display: grid;
    grid-template-columns: 30px;
    grid-template-rows: 30px;
    grid-template-areas: "epsilon-jumpup";
    opacity: .9;
    position: fixed;
    right: 5px;
    transition: scroll 10s;
    z-index: 700;
    box-shadow: 2px 2px 4px var( --rdla-indigo );
}

.epsilon .jumpup {
    align-content: center;
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 24px;
    font-stretch: expanded;
    font-weight: 1000;
    grid-area: epsilon-jumpup;
    justify-content: center;
    text-decoration: none;
    text-shadow: 2px 2px 4px var( --rdla-indigo );
}

.hausmenu {
        position: relative;
        width: 100px;
        height: 100px;
        left: calc( 50% - 50px );
        border-radius: 50%;
        z-index: 1005;
        cursor: pointer;
/*        transition: all 1s ease-in; */          
}

.hausmenu.aktiv #central {
            cursor: pointer;
            box-shadow: 2px 2px 1px gold;              
            transition: all 2.5s;
}

.hausmenu.aktiv.klein {
    width:300px;
    height:300px;
    left: calc( 50% - 150px );
}

.hausmenu.aktiv {
        width: 600px;
        height: 600px;
        left: calc( 50% - 300px );
        top: 100px;
        position: fixed;
/*        background-image: radial-gradient(circle, #fefefe, var( --rdla-rot3 ));
        box-shadow: 3px 3px 1px var( --rdla-rot2);        */
}

.hausmenu.aktiv #central {
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:0; 
}

.hausmenu .p_center {
    position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);   
        z-index: 1;
}

.hausmenu .seite {
    /*   transition: all 3.5s ease-in;       */    
    borderRadius:0 !important;
    height:53px !important;
    width:100% !important; 
    position:unset !important; 
/*    float:left !important; */
    margin-left: 53px;
}

.hausmenu .seite .rundesBild {
 position: unset;
 height: 49px;
 width: 49px;
}

.hausmenu .a-block {
    display: block;
    background: #1111;
    height: 50px;
    width: 100%; 
    color: black;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);    
}

.hausmenu .a-block:hover {
        background: #1115;
    
}

.hausmenu .haustext {
        left: 120px;
        font-size: 1.5rem;
        padding-top: 3px;    
        float: left;
}

.hausmenu .p_1 {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
 
}

.hausmenu .p_2 {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);   
}

.hausmenu .p_3 {
    position: absolute;
    top: 3px;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_4 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_5 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_6 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_7 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_8 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_9 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_10 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_11 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}

.hausmenu .p_12 {
    position: absolute;
            top: calc(50% - 50px);
        left: calc(50% - 50px);
   
}


/*
.hausmenu.aktiv .p_1 {
    top: 3px; left: calc(50% - 50px);
}

.hausmenu.aktiv .p_2 {
    top: calc(6.19%); left: calc(22.06%);
}

.hausmenu.aktiv .p_3 {
    top: calc(22.06%); left: calc(6.19%);
}

.hausmenu.aktiv .p_4 {
    top: calc(50% - 50px); left: 3px;
}

.hausmenu.aktiv .p_5 {
    top: calc(65.44% ); left: calc(6.19% );
}

.hausmenu.aktiv .p_6 {
    top: calc(81.31% ); left: calc(22.06% );
}

.hausmenu.aktiv .p_7 {
    top: calc( 100% - 103px); left: calc(50% - 50px);
}

.hausmenu.aktiv .p_8 {
    top: calc(81.31% ); left: calc(65.44% );
}

.hausmenu.aktiv .p_9 {
    top: calc(65.44% ); left: calc( 81.31% );
}

.hausmenu.aktiv .p_10 {
    top: calc( 50% - 50px); left: calc( 100% -  103px );
}

.hausmenu.aktiv .p_11 {
    top: calc( 22.06% ); left: calc( 81.31% );
}

.hausmenu.aktiv .p_12 {
    top: calc( 6.19% ); left: calc( 65.44% );
} */



.hausmenu .rundesBild {
    border-radius: 50%;
    width: 100px; /* oder eine andere Größe */
    height: 100px; /* sollte gleich der Breite sein für ein perfektes Kreis */
}


.mcb, .flb {
    background: var( --rdla-grau2 );
    margin-left: 0;
    margin-right: 0;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0.5rem;
    z-Index: 110;
    padding: 1rem;
}

.mcb strong, .flb strong {
    display: inline-block;
    font-style: italic;
}

.mcb strong:nth-child(1), .flb strong:nth-child(1) {
    background-color: #fff;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.mcb strong:nth-child(1):hover, 
.flb strong:nth-child(1):hover {
/*    font-size: 20px; */
}

.mcb .schliessbutton, 
.flb .schliessbutton {
	position: absolute;
    right: 0.3rem;
    left: auto;
    top: 0.3rem;
    border: gray solid 1px;
    border-radius: 1rem;
    cursor: pointer;
    height: 1.5rem;
    padding-top: 0.3rem;
    text-align: center;
    width: 1.5rem;
    background: var( --rdla-grau );
}

.mcb .schliessbutton:hover, .flb .schliessbutton:hover {
	background: gray;
	color: white;
	border-color: white;
}

.mcb a, .flb a {
    color: red;
    display: inline-block;
    width: auto;
    width: max-content;
}

.mcb.hidden, .flb.hidden {
    display: none;
}

.feedback-anchor {
    width: 100%;
    margin-left: 1rem;
    height: 1rem;
    margin-bottom: 1rem;
}

.feedback-anchor div {
        float:left; 
        margin-right: 1rem;
        font-style: italic;
        font-weight: bold;
}

#mcookiebanner {
    font-size: 0.8rem;
    padding-right: 1.8rem;
}

#footerlink img, #mcookiebanner img {
    height: 20%;
    width: 20%;
}

#mcookiebanner, #footerlink {
    color: black;
}

#mcookiebanner > div > p, #footerlink > div > p {
	padding: 0;
margin-right: 3rem;
}

#mcookiebanner > div:nth-child(1), #footerlink > div:nth-child(1), {
    background: var( --rdla-grau );
    border: 1px dashed #000;
    padding: 1rem;
	margin-right: 4rem;
    margin: 4px 0 4px 4px;
    border-radius: 0.5rem;
}

#haeuserpanel {
list-style: upper-roman;
font-size: 1rem;
background-color: #eee;
margin-left: auto;
margin-right: auto;
position: relative;
height: max-content;
display: grid;
grid-template-columns: repeat(4, 3.5rem);
grid-template-rows: repeat(3, 2rem);
width: min-content;
min-width: 15rem;
border: #455 solid 0.1rem;
padding-right: 2.5rem;
}

#haeuserpanel > div {
    position: relative; /* Für das Pseudo-Element */
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    text-align: right;
    background-color: #eee;    
    overflow: hidden; /* Stellt sicher, dass das Pseudo-Element nicht außerhalb angezeigt wird */
    cursor: pointer;
}

#haeuserpanel > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at center, white, transparent);
    opacity: 0;
    transition: opacity 1.5s;
    z-Index: 0;
}

#haeuserpanel > div:hover::before {
    opacity: 1;
}



#haeuserpanel > div a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;    
    display: block;
    width: 100%;
    height: 100%;
    text-align: right;
    z-Index: 10;
    background: none;
}


#haeuserpanel > div a .haus { 
    font-size: 1.3rem;
}

#haeuserpanel > div a span { 
    float:right;
}

#haeuserpanel > div:nth-child(1),#haeuserpanel > div:nth-child(5),#haeuserpanel > div:nth-child(9) {
    color: #f00;
}

#haeuserpanel > div:nth-child(2),#haeuserpanel > div:nth-child(6),#haeuserpanel > div:nth-child(10) {
    color: #009317;
}

#haeuserpanel > div:nth-child(3),#haeuserpanel > div:nth-child(7),#haeuserpanel > div:nth-child(11) {
    color: #80783c;
}

#haeuserpanel > div:nth-child(4),#haeuserpanel > div:nth-child(8),#haeuserpanel > div:nth-child(12) {
    color: #2000ff;
}

#urheberrecht {display: block; }

#databox { border: 1px solid var( --rdla-indigo ); border-radius: 1rem; padding: 1rem; }

#customMessage { width: 80%; height: 4rem; min-width: 20rem;  }
#senderBtn { height: 2rem !important; width: 8rem; font-size: 1.5rem;  }
#requestType { font-size: 1rem;  }
#hintergrund {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url('/fotos/hintergrund-2.webp');
    left: 0;
    z-index: -1;
    top: 7rem;
}

#mainContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
    max-width: 500px; /* Begrenzen der maximalen Breite */
    min-height: 300px; /* Mindesthöhe für bessere Layout-Kontrolle */
    background-color: white;
    border: 2px solid var(--rdla-indigo-schatten);
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Wichtig für die vertikale Anordnung */
    justify-content: center; /* Zentrieren der Inhalte innerhalb des Containers */
    align-items: center; /* Zentrieren der Inhalte auf der Querachse */
    transform: translate(-50%, -50%); /* Zentrierung des Containers */
    border-radius: 1rem;
}

#contentContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Zentrieren der Kästchen innerhalb des contentContainer */
    gap: 5px; /* Abstand zwischen den Kästchen */
}

#mainContainer h1 {
    width: 100%; /* Stellt sicher, dass der Header die volle Containerbreite einnimmt */
    text-align: center; /* Zentrieren des Texts im Header */
    margin-bottom: 20px; /* Abstand zwischen Header und Kästchen */
}

  #contentContainer div {
    flex: 1 1 20%;
    margin: 10px;
    background-color: var(--rdla-indigo);
    color: white;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px var(--rdla-indigo-schatten-25);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2332345e"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%; /* Passen Sie die Größe des Icons nach Bedarf an */
  } 

  #mainContainer button {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: var(--rdla-indigo);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

#ufwerts {
	background-color: var( --rdla-indigo );
}

#newsBox {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #f8f9fa;
    color: #333;
    padding: 10px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    z-index: 100; /* Stellt sicher, dass die Box über anderen Elementen angezeigt wird */
}

.news-content {
    position: relative;
    margin: auto;
    width: 100%; /* Anpassen nach Bedarf */
/*    padding: 10px 40px 10px 10px; /* Platz für den Schließbutton */
    /* display: none; /* Hidden by default */
}

#closeNewsBox {
    color: #666; /* Farbe des Schließbuttons */
    font-weight: bold;
}

#newsBox p { padding: 1.5rem 1rem 1rem 1rem;
background: var( --rdla-indigo-schatten-25 ); 
        border-Radius: 0.8rem;        

}

.news-accordion .panel {
    padding: 0;
    display: none;
    overflow: hidden;
}

.news-accordion .accordion-button {
    background-color: #f1f1f1;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.news-accordion .accordion-button:after {
    content: '\002B';  /* Unicode Plus-Symbol */
    color: #777;
    float: right;
    margin-left: 5px;
}
.news-accordion .accordion-button.active:after {
    content: "\2212"; /* Unicode Minus-Symbol */
}

.news-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #f1f1f1;
    text-align: center;
    padding: 5px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    height: 3rem;
    max-width: 1024px;    
}



#newsFooter {
    position: fixed;
    bottom: 0;

    width: 100%;
    background: #f8f9fa; /* Hintergrundfarbe des Footers */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Schatten für den Footer */
    text-align: center;
    padding: 10px 0; /* Padding oben und unten */
    z-index: 100; /* Stellt sicher, dass der Footer über anderen Elementen angezeigt wird */
    max-width: 1024px;    
        margin-left: auto;
        margin-right: auto;    
}

#newsButton {
    display: block; /* Damit der Button immer als Block-Element (eigene Zeile) angezeigt wird */
    padding: 10px 20px; /* Padding für den Button, für bessere Klickbarkeit */
    background-color: #0059dd; /* Blaue Hintergrundfarbe für den Button */
    color: white; /* Weiße Textfarbe */
    border: none; /* Keine Ränder */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Cursor als Pointer, um Klickbarkeit zu signalisieren */
    font-size: 16px; /* Schriftgröße des Buttons */
}

#newsBox {
    position: fixed;
    bottom: 50px; /* Positioniert 50px über dem unteren Rand */

    width: 100%;
    background: #ffffff; /* Weiße Hintergrundfarbe der Nachrichtenbox */
    box-shadow: 0px -5px 15px rgba(0,0,0,0.2); /* Schatten für die Box */
/*    padding: 20px; /* Innenabstand */
    display: none; /* Standardmäßig nicht angezeigt */
    z-index: 101; /* Höherer z-Index als der Footer */
    max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
}

.sprwahl {
position: fixed;
top: 2.8rem;
right: 0.5rem;
z-index: 1000;
max-width: 1024px;
margin-left: auto;
/' margin-right: auto; */
width: 100%;
}

.sprwahl img {
        border: none;
}

.sprwahl .language-selector {
            display: flex;
            justify-content: center;
            max-width: fit-content; 
        }
        .sprwahl .language-selector img {
            width: 40px;
            cursor: pointer;
            border: 1px white solid;
            border-radius: 0.5rem;
        }
        .sprwahl .tooltip {
            position: relative;
            display: inline-block;
            margin-right:0.5rem;                        
        }
        .sprwahl .tooltip:last-item {
            margin-right:0;
        }
        .sprwahl .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .sprwahl .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .sprwahl .disabled {
            pointer-events: none;
            opacity: 0.5;
        }

.sprwahl.desk  {
        display: none;
}

.sprwahl.mob {
    position: fixed;
    width: 100%;
    max-width: 1024px;
    text-align: right;
    color: white;
}

.ilogge_icon {
  width: 3.5rem;
  height: 3rem;
  position: absolute;
  left: 6rem;
  top: 0.5rem;
  padding-left: 0.5rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
  z-index: 100;
/*  display: none; */
  cursor:pointer;
}  

.ilogge_icon img {
    width: 100%;
    height: 100%;    
    border: 1px var( --rdla-indigo ) solid;  
    border-radius: 1.5rem;
}    


#mitgliederbereich .hamburger-menu {
    font-size: 1.5rem;
}

/* Basisgrid für die gesamte Seite */
#mitgliederbereich .grid {
    display: grid;
    grid-template-columns: 1fr; /* Für mobile Geräte eine Spalte */
    gap: 10px;
}

/* Menübereich */
#mitgliederbereich .s1 {
    padding: 10px;
    background-color: #f0f0f0; /* Dezenter Hintergrund für das Menü */
    width: 100%;
}

#mitgliederbereich main {
    min-height: calc( 100vh - 4rem );
}

/* Inhaltsbereich */
#mitgliederbereich .s2 {
    padding: 10px;
}

/* Formular-Grid für Profilinformationen */
#mitgliederbereich .form-grid {
    display: grid;
    grid-template-columns: 1fr; /* Standardmäßig eine Spalte für mobile Geräte */
    gap: 15px;
}

/* Formular-Grid für Profilinformationen */
#mitgliederbereich .form-grid textarea {
    width: 90%;
    height: 5rem;
}

#mitgliederbereich .clpg {
    position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  z-index: 1000;
  background: var( --rdla-indigo-schatten );
  color: white;
  border-radius: 1rem;
  border: solid 1px var( --rdla-indigo );
  padding: 0.25rem 0 0 0.6rem;
}

#mitgliederbereich .clpg a {
    border:0;
    padding:0;
    background: unset;
    color: white;
}

#mitgliederbereich .clpg:hover {
    background: white;
    color: var( --rdla-indigo-schatten );

}

#mitgliederbereich .clpg:hover a {
    color: var( --rdla-indigo-schatten );

}

#mitgliederbereich .form-grid button, #mitgliederbereich .form-grid #profile_photo button {
    background: #A226;
}

.submenu-toggle {
 width: 1.2rem;
 height: 1.2rem;
}

/* Grundlegender Container für das Kachelmenü */
.kachel-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    gap: 20px;
}

/* Stil der einzelnen Kachel */
.kachel {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0; /* Heller Hintergrund für die Kachel */
    border: 1px solid #ccc; /* Dezenter Rand */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    position: relative;
}

.kachel a {
    width: 100%;
    height: 100%;       
}

.kachel:hover {
    transform: scale(1.1); /* Animation beim Hover */
    cursor: pointer;
}

/* Icon und Text in der Kachel */
.kachel a .tile-icon {
    font-size: 40px; /* Größe des Icons */
    color: #333; /* Dunkle Schriftfarbe für gute Lesbarkeit */
    position: absolute;
    z-index: 0;
}

.kachel a .tile-text {
    font-size: 16px;
    color: #fff;
    margin-top: 8px; /* Abstand zwischen Icon und Text */
    position: absolute;
    z-Index: 1;    
    bottom: 0px;
    font-weight: bolder;
    text-transform: full-width; 
    background-color: #888a;
    width: 100%;
    text-align: center;
    height: 2.5rem;
    padding: 0.5rem;    
}

.kachel.skk4 a .tile-text {
        padding: 0;
}

.mitgliederbereich .s1 ul {
  padding: 1rem;    
}

.mitgliederbereich .s1 ul ul {
 width: 100%;  
}


.mitgliederbereich .s2 #dateiliste {
    list-style: disclosure-closed;
}

.mitgliederbereich .s2 #dateiliste li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    height: 1.5rem;
    background-color: var( --rdla-grau );     
    border: thin solid var( --rdla-indigo-schatten );
}

.mitgliederbereich .s2 #dateiliste li a {
      
      background-color: var( --rdla-grau ); 
      color: Black;
}

.mitgliederbereich .s1 li a, .mitgliederbereich .s2 a {
  text-decoration: none;
  color: white;
  padding: 0 4px 0 4px;  
}

.mitgliederbereich .s2 a { 
      border-color: var( --rdla-indigo-schatten );
      background-color: var( --rdla-indigo-schatten );    
    }

.mitgliederbereich .s1 li:hover,  .mitgliederbereich .s2 a:hover {
  border: 2px solid;    
  border-color: var( --rdla-orange );    
}

.mitgliederbereich .s1 li {
      margin-bottom: 4px; 
      display: block;      
      border: 2px solid;
      border-color: var( --rdla-indigo-schatten );
      background-color: var( --rdla-indigo-schatten );
      min-height: 1.5rem;
}

.mitgliederbereich .s1 ul {
    list-style-type: none;
    margin-bottom: 4px;
}

.mitgliederbereich .s1 ul ul {
    margin-top: 4px;
}

.statistik tbody tr:nth-child(2n) {
        background: #f2f2f2;
        border-bottom: 1px solid black;
}

.statistik {
        background: #fff;
        overflow:scroll;
        word-wrap: anywhere;  
        margin: 0;
        height: 100%;        
}

.statistik main {
        top:0;
}


.statistik p {
    margin-top: 1rem;
    margin-Bottom: 1rem;    
    padding: 0;
}

.form-hinweis {
    font-style: italic;
    font-size: 0.7rem;
    background: #eee;
    border-radius: 0.5rem;
    padding: 0.4rem;
}

.kontaktliste {
  padding: 5px;
  margin: 5px;
  border: 1px var( --rdla-indigo ) solid;
  border-radius: 0.5rem;
  box-shadow: var( --rdla-indigo-schatten) 1px 1px 1px 1px;
}

.kontaktliste p {
 padding:0;  
 margin-top:0.3rem;
 margin-bottom: 0.3rem;
}

.kontaktliste .rolle {
    font-style: italic;
    font-size: 0.7rem;
    color:  var( --rdla-indigo-schatten);
    background: #eee;  
    padding-left:  1rem;
}

.userliste a {
    text-decoration: none;
}

.inactiveoption {
  background-color: var( --rdla-indigo-schatten-25 );
  text-decoration: none;
  color:  var( --rdla-indigo-schatten );
  padding: 0 4px 0 4px;  
  border: 2px solid;    
  border-color: var( --rdla-indigo-schatten ); 
  display: block;    
}

#nachrichtDetail {
    border: thin solid var( --rdla-indigo );
    border-radius: 4px;
    padding: 0.6rem;
    background: mintcream;
}

#nachrichtenListe {
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

.nachricht {
    padding: 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

#nachrichtenVerlauf, #verlaufsListe {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    background-color: #f9f9f9;
    max-height: 200px;
    overflow-y: auto;
}

.nachrichtv p, #verlaufsListe p {
    margin: 0;
    padding: 2px 0;
}

#verlaufsListe .nachricht, #nachrichtenVerlauf .nachrichtv {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    line-height: 1.5;
}

#verlaufsListe .eigene-nachricht, #nachrichtenVerlauf .eigene-nachricht {
    background-color: #e6f7ff; /* Hellblau für eigene Nachrichten */
    text-align: right; /* Text rechtsbündig */
}

#verlaufsListe .partner-nachricht, #nachrichtenVerlauf .partner-nachricht  {
    background-color: #f4f4f4; /* Grau für Nachrichten des Partners */
    text-align: left; /* Text linksbündig */
}

#nachrichtForm textarea {
    width: calc( 100% - 2rem );
}

#Sprungbrett main, #kontakt main {
    padding: 1rem;
}

.option {
  margin-top: 1.5rem;
  border-top: 1px solid black;
  padding-top: 0.5rem;
}

.option label {
    margin-right: 1rem;
}


.option p {
    padding: 0;    
}

.reg1 p, .reg1 h1, .reg1 h2, .reg1 ol {
 margin: 0;   
 width: calc( 100% );
}


.reg1 h2 {
 margin-top: 2rem;
 margin-Bottom: 1rem;
}

#login {
    width: calc( 100% - 2rem );
}

#login .reg1 {
    padding: 1rem;
}

#login .reg1 form {
 width: 100%;    
}

/* Wrapper für die Unterseite */
.astrel {
    padding: 2em 2.4em;
}

/* H1 + H2 in Bordeaux */
.astrel h1,
.astrel h2 {
    color: #7b1f2f;
}

/* H1 etwas mehr Raum nach unten */
.astrel h1 {
    margin-bottom: 1.2em;
}

/* H2 etwas kleiner und mit Abstand */
.astrel h2 {
    margin-top: 2em;
    margin-bottom: 0.6em;
    font-size: 1.25em;
    font-weight: 600;
}


.astrel-spirale {
    text-align: center;
    margin-bottom: 1.5em;
}

.astrel-spirale img {
    max-width: 180px;
    height: auto;
    opacity: 0.95;
}


.astrel .intro-satz {
    font-size: 1.3em;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 1.8em;
}

/* Bordeaux für Seelenastrologie & Releasing */
.astrel h1,
.astrel h2 {
    color: #800020;
    margin-right: auto;
  margin-left: auto;
  width: fit-content;
}

/* Etwas eleganterer Stil */
.astrel h1 {
    font-size: 2em;
    margin-bottom: 0.8em;
    font-weight: 600;
}

.astrel h2 {
    font-size: 1.35em;
    font-weight: 600;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

#front {
    margin-top:7rem;
}

#front h2 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.rauhnaechte-hinweis {
    margin: 3rem 0;
    font-size: 0.95em;
    color: #333;
}

.rauhnaechte-hinweis h3 {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.rauhnaechte-hinweis a {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}


/* Kombiliste */


/* Chiron-Lilith-Mondknoten Linkliste / Selectbox */

.kombi-linkliste-box {
    --kombi-row-height: 1.3rem;
    --kombi-gap: .35rem;

    width: 100%;
    max-width: 100%;
    max-height: calc((var(--kombi-row-height) * 3) + (var(--kombi-gap) * 2) + .7rem);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;

    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .75rem;
    padding: .35rem;
    background: rgba(255, 255, 255, .72);
    scrollbar-width: thin;
    height: 7rem;
  overflow: hidden;
  overflow-y: scroll
}


.mid .kombi-linkliste {
    list-style: none;
    margin: 0;
    padding: 0;
}



.mid .kombi-linkliste-item + .kombi-linkliste-item {
    margin-top: var(--kombi-gap);
}

.mid .kombi-linkliste-link {
    min-height: var(--kombi-row-height);
    width: 100%;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: .32rem;
    align-items: center;

    padding: .62rem .78rem;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    background: rgba(0, 0, 0, .035);
    overflow: hidden;
}

.mid .kombi-linkliste-link:hover,
.mid .kombi-linkliste-link:focus {
    background: rgba(0, 0, 0, .075);
    outline: none;  
    display: grid;
}

.mid .kombi-linkliste-zeitraum {
    min-width: 0;
    display: block;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mid .kombi-linkliste-positionen {
    min-width: 0;
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;

    gap: .25rem .75rem;
    font-size: .94em;
    line-height: 1.22;
}

.mid .kombi-pos {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: .24rem;
    white-space: nowrap;
}

.mid .kombi-symbol {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

.mid .kombi-pos-text {
    min-width: 0;
}

/* Mittlere Breiten: Text unter das Datum setzen, damit nichts gequetscht wird. */
@media screen and (max-width: 980px) {
/*    .mid .kombi-linkliste-box {
        --kombi-row-height: 5.65rem;
    } */

    .mid .kombi-linkliste-link {
        grid-template-columns: minmax(0, 1fr);
    }

    .mid .kombi-linkliste-positionen {
        justify-content: center;
    }
    
   .feedback-anchor {
     height: 3rem;
 
}
    
}

/* Mobile: nur Datum + größere Symbole anzeigen. */
@media screen and (max-width: 760px) {
    .mid .kombi-linkliste-link {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .mid .kombi-linkliste-zeitraum {
        display: block !important;
        text-align: center;
        font-size: .72rem;
    }

    .mid .kombi-pos-text,
    .mid .kombi-pos-prefix,
    .mid .kombi-pos-sign {
        display: none !important;
    }

    .mid .kombi-symbol {
        font-size: 1.02rem !important;
    }
}

/* Sehr kleine Displays: Abstände enger, Symbole etwas größer. */
@media screen and (max-width: 360px) {
    .mid .kombi-linkliste-box {
        --kombi-row-height: 3.75rem;
    }

    .mid .kombi-linkliste-link {
        padding-inline: .55rem;
    }

    .mid .kombi-linkliste-positionen {
        gap: .38rem;
    }

    .mid .kombi-symbol {
        font-size: 1.55rem;
    }
}