/* --- GRUNDLAGEN (Desktop & Allgemein) --- */
body {
    margin: 0;
    padding: 0;
    font: 14px "Trebuchet MS", verdana, arial, sans-serif; /* Schrift etwas größer für bessere Lesbarkeit */
    background: #2e2e2e;
    color: #333;
}

#container {
    width: 95%;            /* Flexibel auf kleinen Bildschirmen */
    max-width: 980px;      /* Maximale Breite auf Desktop */
    margin: 10px auto;
    padding: 0;
    border: 5px solid #800000;
    background: #e9eee4;
    color: #000000;
    overflow: hidden;      /* Verhindert, dass Inhalte überstehen */
}

/* --- BANNER --- */
#topimg {
    height: 150px;
    background: #800000 url('../img/topimg_kontakt.jpg') no-repeat center;
    background-size: cover; /* Bild füllt den Bereich immer aus */
    color: #fff;
}

#topimg h1 {
    float: left;
    margin: 20px 0 0 15px; /* Etwas mehr Abstand von oben */
    font-size: 180%;       /* Etwas größer für bessere Lesbarkeit */
    letter-spacing: 3px;
    color: #ffffff !important; /* Reinweiß erzwingen */
    background: #800000;      /* Ihr original Ruckaberle-Rot */
    padding: 5px 15px;        /* Ein schöner Rahmen um den Text */
    text-transform: uppercase;
}

/* --- NAVIGATION --- */
#navcontainer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #800000;
    overflow: hidden;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

#navcontainer ul li {
    display: inline;
}

#navcontainer ul li a {
    float: left;
    padding: 10px 15px;
    text-decoration: none;
    border-right: 1px solid #fff;
    background: #800000;
    color: #ccc;
}

#navcontainer ul li a:hover, #navcontainer ul li a#current {
    background: #CC0000;
    color: #FFFFFF;
}

/* --- LAYOUT (SIDEBAR & CONTENT) --- */
#sidebar {
    float: left;
    width: 170px;          /* Feste Breite für Desktop */
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
}
#sidebar ul li a {
    float: left;
    background: #e9eee4;
    color: #999999;
}
#sidebar ul li a:hover, #sidebar ul li a#current {
    background:#e9eee4;
    color: #666;
}
#content {
    margin-left: 170px;    /* Platz für die Sidebar auf Desktop */
    padding: 15px;
    border-left: 1px dashed #999;
    min-height: 400px;
    background: #e9eee4;
}

/* --- TYPOGRAFIE & DETAILS --- */
p { line-height: 1.6em; margin: 10px 0; color: #333; }
h1 { color: #800000; text-transform: uppercase; }
h2 { background: #800000; color: #fff; padding: 5px; font-size: 110%; }
img { max-width: 100%; height: auto; } /* WICHTIG für Mobilgeräte */

/* --- RESPONSIVE TABLE CONTAINER --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}

/* --- FOOTER --- */
#footer {
    clear: both;
    padding: 15px;
    background: #800000;
    color: #ccc;
    font-size: 85%;
    text-align: center;
}
#footer a { color: #fff; text-decoration: none; }

/* --- MOBIL-OPTIMIERUNG (Smartphones) --- */
@media screen and (max-width: 768px) {
    #container { 
        width: 100%; 
        margin: 0; 
        border: none; 
    }

    #topimg { height: 100px; }
    #topimg h1 { font-size: 110%; margin: 5px; }

    /* Navigation stapeln */
    #navcontainer ul li a {
        float: none;
        display: block;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #fff;
        box-sizing: border-box;
    }

    /* Sidebar untereinander statt nebeneinander */
    #sidebar {
        float: none;
        width: 100%;
        border-bottom: 1px dashed #999;
    }

    #content {
        margin-left: 0 !important; /* Entfernt den seitlichen Einschub */
        border-left: none;
        width: 100%;
        box-sizing: border-box;
    }

    /* Tabelle bleibt Tabelle, wird aber im Container scrollbar */
    table {
        width: 100% !important;
        min-width: 400px; /* Verhindert zu starkes Zusammenquetschen */
    }
}