/* RADIO BUTTONS */

/* Radio Buttons verstecken */
input[type="radio"] {
    display: none;
}

/* Alle Inhalte verstecken */
.tab-content {
    display: none;
}

/* Aktiven Inhalt anzeigen */
#tab1:checked~.wrapper .container .content #content1,
#tab2:checked~.wrapper .container .content #content2,
#tab3:checked~.wrapper .container .content #content3,
#tab4:checked~.wrapper .container .content #content4,
#tab5:checked~.wrapper .container .content #content5 {
    display: block;
}


/* Standardformatierung */
body {
    font-family: Verdana, sans-serif;
    font-size: 0.9em;
    line-height: 150%;

    background: #c8c8ff;
}


/* 1. Wrapper */
.wrapper {
    margin: 20px auto;

    max-width: 1150px;

    background: white;
}


/* 2. Header */
header {
    padding: 30px;

    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: white;

    background: #7373c7;
}


/* 3. Container */
.container {
    display: flex;              /*für 2-spaltiges Layout */
    min-height: 400px;
}


/* 3.1 Inhaltsbereich */
.content {
    flex: 3;
    padding: 30px;
    
    text-align: center;

    background-color: #a7a7d5;

}


/* Überschrift-Formatierung */

h1 {
    font-size: 1.5em;
    color: #560094;
    line-height: 150%;
}

h2 {
    font-size: 1.3em;
    color: #004141;
    line-height: 150%;
}

a {
    color: #293A53;
}


/* List‑Elemente zentrieren */
.centered-list {
    padding: 0;
    margin: 0 auto;
    list-style-position: inside;
}


.sidebar {
    width: 40px;
    background-color: #a7a7d5;
    overflow: hidden;
    transition: width 0.3s ease;
    position: relative;
}


/* Header bleibt immer sichtbar */
.menu-header {
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 150%;
    cursor: default;
}

/* Liste wird zunächst nicht angezeigt (wegen overflow) */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    visibility: hidden;
}

/* Einzelne Einträge */
.menu-list li label {
    display: block;
    padding: 0.8rem 1rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;          /* verhindert Zeilenumbruch bei schmaler Breite */
} 

/* Hover‑Effekt: Menü ausklappen */
.sidebar:hover,
.sidebar:focus-within{
    flex: 120px;    /* gewünschte Breite im geöffneten Zustand */
    background: #585896;
    visibility:visible;
    }


.sidebar:hover .menu-list,
.sidebar:focus-within .menu-list {
    visibility:visible;
}


/* leichtes Highlight beim Überfahren eines Links */
.menu-list li label:hover {
    background-color: rgba(255,255,255,0.1);
}



#menu-toggle {
    -webkit-tap-highlight-color: transparent; /* entfernt grauen Klick‑Highlight */
    touch-action: none;                /* sagt dem Browser, dass nur Tap‑Events wichtig sind */
}




/* Menü 
nav {
    flex: 1;
    background: #585896;
    padding: 20px;
    background-image: url("allreg.gif");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    background-origin: padding-box;
}


nav label {
    display: block;
    color: white;
    padding: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}
*/


/* Aktives Menü hervorheben
#tab1:checked~.wrapper nav label[for="tab1"],
#tab2:checked~.wrapper nav label[for="tab2"],
#tab3:checked~.wrapper nav label[for="tab3"],
#tab4:checked~.wrapper nav label[for="tab4"],
#tab5:checked~.wrapper nav label[for="tab5"] {
    background: #7373c7;
}
*/

/* 4. Footer */
footer {
    background: #888888;
    text-align: center;
    padding: 10px;
}