html {overflow-y: scroll;}
body {margin:0px; padding:0px; background:#ffffff; font-family:Verdana, Arial; font-size:0.9em; text-align:left;
}

ul {clear:both; display:block; margin:0; padding:0; list-style-type:disc; list-style-position:outside;}
li {display:inline;}

div.frame {margin:40px auto; width:920px; DDDheight:660px; font-size:0.8em; border:#f1f1f1 0px solid; background:#ffffff;}


/* Container-Styling */
div.content {
    /* Layout */
    position: absolute; /* Ggf. ändern für Responsive Design (siehe unten) */
    width: 670px;
    margin: 215px 220px;
    padding-right: 20px;
    padding-bottom: 30px;
    
    /* Text & Scrollverhalten */
    overflow: auto;
    text-align: justify;
    font-size: 1em;
    line-height: 2em;
}


div.content ul {padding:5px; list-style-type:square; list-style-position:inside;}
div.content ul li {display:list-item; padding:1px;}




.off {display:none;}

div.menu {position:absolute; height:465px; margin:215px 26px 0px 7px; border:1px solid #fff}
div.menu:DDDhover {border:1px solid #BFBFBF}
a.logo {position:absolute; margin:-220px 0px;}


h1, h2, h3, div.content > * {width:650px;}
div.content.topic1, div.content.topic1 > * {width:320px}  /*aktuell schmaler*/

h1 {margin-top:0px; margin-bottom:10px; overflow:hidden; font-size:1.1em; text-align:left; font-weight:bold; color:#7F7F7F; text-decoration:none; line-height:35px; padding:5px 0px;}
h1 a {font-weight:bold; color:#60251D; text-decoration:none;}
h1 a:hover {color:#000000;}


h2 {margin-top:20px; margin-bottom:5px; overflow:hidden; font-size:1em; font-weight:bold; text-align:left;}
h3 {margin-top:10px; margin-bottom:5px; font-size:1em; font-weight:bold;  padding:3px; border:1px solid #EFEFEF; background:#fff; text-decoration:none;}


div.spacer {clear:left; padding-top:10px; margin-bottom:10px; border-bottom:1px solid #EFEFEF;}

div.menu a.link {display:block; font-size:1em; background:#fff; width:170px; font-weight:bold; color:#8F8F8F; text-decoration:none; vertical-align:center; padding:1.2em 0px;}
div.menu:not(.pausemousover) a:not(.logo):hover, div.menu a:not(.logo).active {background:#214EA1; color:#fff; padding:1.2em 4px;}

a {color:gray;}
a:hover {color:#000;}


table {padding:0px; margin:0px; border-collapse: collapse; line-height:1.5em; font-size:0.8rem;}
table a {text-decoration:none; font-size:1em; color:#444;}
table * {padding:0px; margin:0px;}
table tr td {vertical-align:top; color:#444; padding-top:8px; padding-bottom:8px; border-top:1px solid #EFEFEF;}
table tr td em {color:#000; font-style:normal; font-size:0.9rem;}


/* KLEINE MONITORE */
@media only screen and (max-device-width: 425px) {
div.menu a.link {font-size:1.7em;}
}



/* =========================================
   RESPONSIVE DESIGN (Mobil & Tablet)
   Füge dies ganz unten in style.css ein
   ========================================= */

@media only screen and (max-width: 860px) {

    /* 1. Hauptrahmen flexibel machen */
    div.frame {
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box; /* Verhindert, dass Padding die Breite sprengt */
    }

    /* 2. Menü: Absolute Positionierung aufheben, nach oben setzen */
    div.menu {
        position: static; /* Wichtig: holt es in den normalen Fluss zurück */
        width: 100%;
        height: auto;
        margin: 0;
        border: none;
        background: #fff;
        text-align: center;
    }

    /* Menü-Links: Groß und klickbar machen */
    div.menu a.link {
        width: auto;      /* Volle Breite statt 170px */
        display: block;   /* Untereinander */
        border-bottom: 1px solid #ddd;
        padding: 15px 10px;
        font-size: 1.1em;
        text-align: center;
        box-sizing: border-box;
    }

    /* 3. Logo: Sauber oben platzieren */
    a.logo {
        position: static; /* Kein wildes Verschieben mehr */
        display: block;
        margin: 20px auto; /* Zentriert */
        width: auto;
        text-align: center;
    }
    a.logo img {
        max-width: 80%; /* Skaliert mit, wenn Bildschirm sehr klein */
        height: auto;
    }

    /* 4. Themen-Bilder (rechts im Desktop): Mobil zentrieren */
    img[id^="img"], img[id^="img"]:not(.off) {
        display: none;
    }

    /* 5. Inhalt: Breite anpassen und unter das Menü schieben */
    div.content {
        position: static;
        width: 100%;
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
        height: auto;
        overflow: visible;
    }
    
    /* Verhindert, dass innere Elemente breiter als der Schirm sind */
    h1, h2, h3, div.content > * {
        width: 100%; 
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Speziell für topic1, falls dort andere Breiten waren */
    div.content.topic1, div.content.topic1 > * {
        width: 100%;
    }

    /* 6. Tabellen (Mitgliederliste) mobil lesbar machen */
    /* Wir wandeln die Tabellenzeilen in Blöcke um */
    table, tbody, tr, td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    table tr {
        margin-bottom: 20px;
        border-bottom: 2px solid #eee; /* Trennlinie zwischen Einträgen */
        padding-bottom: 10px;
    }
    
    table td {
        padding: 2px 0;
        border: none;
    }
    
    /* Leere Zellen (Abstandhalter) ausblenden */
    table td:empty {
        display: none;
    }
    
    /* Spalte mit Bild/Name etwas hervorheben */
    table td[width="270px"] {
        width: 100%; /* Breite erzwingen */
        font-weight: bold;
        margin-bottom: 5px;
    }
}