/* ──────────────────────────────
   Dynamische Settings (Custom-Props)
   ────────────────────────────── */
:root {
    /* Grundlayout */
    --background-color: #f0f0f0;
    --table-bg-color:   #fbfbfb;
    --font-family:      Inter, sans-serif;
    --font-size:        16px;

    /* Globale Fallbacks */
    --header-size:      24px;
    --text-color:       #333333;
    --heading-color:    #1e2761;

    /* **Neu: individuelle Überschriften** */
    --h1-size:  24px;
    --h1-color: #1e2761;

    --h2-size:  20px;
    --h2-color: #1e2761;

    --h3-size:  16px;
    --h3-color: #1e2761;

    /* Legenden */
    --legend-color:     #1e2761;

    /* Buttons */
    --button-one-color:         #6096bf;
    --button-one-text-color:    #ffffff;
    --button-one-hover-color:   #596f80;
    --button-two-color:         #bf6060;
    --button-two-text-color:    #ffffff;
    --button-two-hover-color:   #805959;
    --button-three-color:       #72a372;
    --button-three-text-color:  #ffffff;
    --button-three-hover-color: #598059;

    --border-radius: 5px;
    --padding:       8px;
}

/* ──────────────────────────────
   Basis-Typografie & Layout
   ────────────────────────────── */
body{
    background-color: var(--background-color);
    font-family:      var(--font-family);
    font-size:        var(--font-size);
    color:            var(--text-color);
    margin:0;
    padding:0;
    line-height:1.6;
}

/* Überschriften mit neuen Variablen */
h1{
    font-size:   var(--h1-size, var(--header-size));
    color:       var(--h1-color, var(--heading-color));
    font-weight: bold;
    margin-top:0;
}
h2{
    font-size:   var(--h2-size, var(--header-size));
    color:       var(--h2-color, var(--heading-color));
    font-weight: bold;
    margin-top:0;
}
h3{
    font-size:   var(--h3-size, var(--header-size));
    color:       var(--h3-color, var(--heading-color));
    font-weight: bold;
    margin-top:0;
}

/* ──────────────────────────────
   Formulare & Tabellen
   ────────────────────────────── */
fieldset{
    border:1px solid #ccc;
    margin-bottom:20px;
    padding:15px;
    border-radius:5px;
    position:relative;
}
legend{
    font-size:1.5em;
    font-weight:bold;
    padding:0 10px;
    color:var(--legend-color);
}
label{
    display:block;
    margin-bottom:8px;
    font-weight:bold;
}
table{
    background-color:var(--table-bg-color);
    border-collapse:collapse;
    box-shadow:0 4px 6px rgba(0,0,0,.1);
    border-radius:8px;
    overflow:hidden;
    width:100%;
    margin-bottom:1rem;
}
input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
    width:100%;
    padding:8px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:1em;
}
textarea{resize:vertical;}

/* ──────────────────────────────
   Buttons
   ────────────────────────────── */
.button-one,
.button-one-right,
.button-two,
.button-two-right,
.button-three,
.button-three-right{
    display:inline-block;
    margin-top:10px;
    margin-right:10px;
    padding:var(--padding) 20px;
    text-decoration:none;
    border-radius:var(--border-radius);
    border:none;
    font-size:.9em;
    transition:all .3s ease;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
}
.button-one,
.button-one-right{
    background-color:var(--button-one-color);
    color:var(--button-one-text-color);
}
.button-one:hover,
.button-one-right:hover{
    background-color:var(--button-one-hover-color);
    transform:scale(1.05);
}
.button-one-right,
.button-two-right,
.button-three-right{float:right;}

.button-two,
.button-two-right{
    background-color:var(--button-two-color);
    color:var(--button-two-text-color);
}
.button-two:hover,
.button-two-right:hover{
    background-color:var(--button-two-hover-color);
    transform:scale(1.05);
}
.button-three,
.button-three-right{
    background-color:var(--button-three-color);
    color:var(--button-three-text-color);
}
.button-three:hover,
.button-three-right:hover{
    background-color:var(--button-three-hover-color);
    transform:scale(1.05);
}

/* ──────────────────────────────
   Container & Helferklassen
   ────────────────────────────── */
.button-container{
    display:flex;
    gap:20px;
    justify-content:center;
    align-items:center;
    margin-top:10px;
}
.alternate-list{padding:0;margin:0;}
.alternate-list li{list-style:none;padding:10px;}
.alternate-list li:nth-child(odd){background-color:#ffffff;}
.alternate-list li:nth-child(even){background-color:#f0f0f0;}

.container{max-width:1200px;margin:0 auto;padding:20px;}
.page-container{
    max-width:800px;
    margin:20px auto;
    padding:20px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.row{display:flex;flex-wrap:wrap;gap:20px;}
.col-30{flex:1 1 27%;}
.col-50{flex:1 1 47%;}
.col-70{flex:1 1 67%;}
.col-100{flex:1 1 100%;}

@media(max-width:1024px){
    body{font-size:calc(var(--font-size) - 2px);}
    .container{padding:15px;}
}
@media(max-width:768px){
    body{font-size:calc(var(--font-size) - 4px);}
    .container{padding:10px;}
    table{font-size:calc(var(--font-size) - 2px);}
}
@media(max-width:480px){
    body{font-size:calc(var(--font-size) - 6px);}
    .container{padding:5px;}
    table{font-size:calc(var(--font-size) - 4px);}
}

/* ──────────────────────────────
   Kopfbereich
   ────────────────────────────── */
.site-header{
    margin-bottom:20px;
    border-bottom:1px solid #ddd;
    padding-bottom:10px;
}
.header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.portal-name{
    flex:0 0 67%;
    font-size:var(--header-size);
    font-weight:bold;
    color:var(--heading-color);
}
.logo-container{
    flex:0 0 33%;
    text-align:right;
}
.logo-container img{
    max-width:100%;
    height:auto;
}