/* ==============================================
   format.css | FINAL KORRIGIERT UND STABILISIERT
   ============================================== */

/* *** KRITISCHE GLOBALE KORREKTUR *** */
/* Stellt sicher, dass Padding und Border in die Breitenberechnung fallen. */
* {
    box-sizing: border-box; /* DIES IST DIE ENTSCHEIDENDE ZEILE! */
}
/* *** END KRITISCHE KORREKTUR *** */


/* --- Ihr ORIGINAL CSS --- */

/* schriftstil,abstände */
body {
    margin-top: 10px; 
    margin-left: 6px; 
    margin-right: 6px;
    margin-bottom: 10px; 
    color: #000000;  
    background-color: #ffffff;  
    font-family: verdana,arial; 
    font-size: 10pt;
    /* Fügen Sie hier line-height hinzu, um die Lesbarkeit zu verbessern */
    line-height: 1.5;
}

table, tr, td { 
    color: black;
    font-family: verdana,arial; 
    font-size: 10pt;
}

/* scrolleiste internet explorer ab vers.5.5 (Nur für IE, kann bleiben) */
body {
    scrollbar-arrow-color: #5A8F75; 
    scrollbar-base-color: #ffffff;
    scrollbar-highlight-color : #2F2F2F; 
    scrollbar-shadow-color : #2F2F2F;
    SCROLLBAR-TRACK-COLOR: #cccccc;
}

/* allgemeine links im text */
a:link{ color: black; text-decoration:underline; font-family: verdana; font-size: 10pt;}
a:visited{color:black;text-decoration:underline;font-family: verdana; font-size: 10pt;}
a:active{ color:black;text-decoration:underline;font-family: verdana; font-size: 10pt; }
a:hover{ color: #89A9B8;background-color:white;  text-decoration:none;font-family: verdana; font-size: 10pt; }

/* menue oben */
#menu a {
    display: block;
    line-height:18px;
    background-color:#89A9B8;
    color:#ffffff;
    text-decoration:none ;
    font-family:verdana, sans-serif;
    font-size: 9pt;
    width:121px;
    padding-left: 2px; padding-bottom: 2px;     padding-top: 2px;
    margin: 0px auto;
}
#menu a:visited{
    line-height:18px;
    color:#ffffff;
    background-color:#89A9B8;
    text-decoration:none ;
    font-family:verdana, sans-serif;
    font-size:9pt;
    width:121px;
    padding-left: 2px; padding-bottom: 2px;     padding-top: 2px;
    margin: 0px auto;
}
#menu a:active{
    background-color:#89A9B8;
    color:#ffffff;
    text-decoration:none ;
    font-family:verdana, sans-serif;
    font-size: 9pt;
    width:121px;
    padding-left: 2px; padding-bottom: 2px;     padding-top: 2px;
    margin: 0px auto;
}
#menu a:hover {
    background-color:#5E879B;
    color:white;
    text-decoration:none ;
    font-family:verdana, sans-serif;
    font-size: 9pt;
    width:121px;
    padding-left: 2px; padding-bottom: 2px;     padding-top: 2px;
    margin: 0px auto;
}

/* menue ûnten */
#menu2 a {
    background-color:#ffffff;
    color:#89A9B8; 
    text-decoration:none ;
    font-family:verdana, sans-serif; 
    font-size: 9pt;
}
#menu2 a:visited{
    background-color:#ffffff;
    color:#89A9B8;
    text-decoration:none;
    font-family:verdana, sans-serif; 
    font-size: 9pt;
}
#menu2 a:active{
    background-color:#ffffff;
    color:#89A9B8;
    text-decoration:none;
    font-family:verdana, sans-serif; 
    font-size: 9pt;
}
#menu2 a:hover {
    background-color:#89A9B8;
    color:#ffffff;
    text-decoration:none ;
    font-family:verdana, sans-serif; 
    font-size:9pt;
}

/* --- ERGÄNZUNGEN: Allgemeine Korrekturen und neue Sektionen --- */

/* Korrektur: H1/H2-Style */
h1 {
    font-size: 16pt;
    font-weight: bold;
    font-family: verdana, arial;
    margin-top: 20px;
    margin-bottom: 10px;
}
h2 {
    font-size: 14pt;
    font-weight: bold;
    font-family: verdana, arial;
    margin-top: 15px;
    margin-bottom: 8px;
}

/* Korrektur: Bilder begrenzen - WICHTIG */
img {
    max-width: 100% !important; /* Erzwungene Begrenzung */
    height: auto;
}

/* ==============================================
   NEU: Galerie- und Filter-Styles
   ============================================== */

/* --- 1. Galerie-Styling (page_galerie) --- */

.gallery-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    padding: 20px 0;
}

.gallery-thumb {
    width: 220px; /* Feste Breite für jedes Thumbnail */
    text-align: center;
    border: 1px solid #ccc; 
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
    /* box-sizing: border-box; wird global oben gesetzt, ist aber hier wichtig */
}

.gallery-image {
    max-width: 100%; 
    height: auto;
    display: block;
    margin: 0 auto 10px auto; 
}

.gallery-caption {
    font-size: 10pt;
    line-height: 1.4;
    color: #333;
    font-family: verdana, arial;
}

.title-text {
    font-weight: bold;
}

.year-text {
    font-weight: normal;
    color: #666;
}

/* --- 2. Filter-Formular Styling (page_galerie) --- */
.filter-form { 
    background: #f0f0f0; 
    padding: 15px; 
    margin-bottom: 20px; 
    border: 1px solid #ccc; 
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: flex-end;
}
.filter-form label { 
    font-weight: bold; 
    flex: 1 1 180px;
    font-size: 10pt;
    font-family: verdana, arial;
}
.filter-form input[type=text], 
.filter-form input[type=number] { 
    width: 100%; 
    padding: 5px; 
    /* box-sizing: border-box; wird global oben gesetzt */
    margin-top: 5px;
    font-size: 10pt;
}
.filter-form button, .filter-form a {
    flex-shrink: 0;
    margin-top: 10px;
}

/* --- 3. Styling für die Bild-Detailseite (page=picture) --- */
.picture-detail-container {
    display: flex;
    gap: 30px;
    padding: 20px 0;
    max-width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

.picture-image-area {
    flex: 1 1 550px; 
    text-align: center;
}

.detail-image-large {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.picture-info-area {
    flex: 1 1 300px;
}

.detail-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.detail-info-table th, .detail-info-table td {
    padding: 8px 0;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 10pt;
    font-family: verdana, arial;
}

.detail-info-table th {
    font-weight: bold;
    color: #555;
    width: 40%;
}