/* =========================================================
   PHOTOGRAPHY-HAUPTNAVIGATION
   ========================================================= */

.photography-navigation {
    width: 100%;
    margin: 0;
    min-height: 18px;
    gap: 1px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    background: #999999;
    padding: 0;
}

.photography-navigation a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 18px;
    padding: 0;

    color: #000000;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;

    text-decoration: none;
    white-space: nowrap;
}

.photography-navigation a img {
    display: block;
    height: 18px;
    width: auto;
    border: 0;
}

.photography-navigation a:hover {
    color: #FFFFFF;
    background: transparent;
    text-decoration: none;
}


/* =========================================================
   PHOTOGRAPHY-SEITEN – CONTENT-PANEL
   ========================================================= */

body.photography-page .content-panel {
    margin: 55px auto 0 auto;
    background: #666666;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}


/* =========================================================
   PHOTOGRAPHY-INTRO
   ========================================================= */

.photography-intro {
    padding: 45px 60px;
}

.photography-intro-content {
    display: grid;
    grid-template-columns: 558px minmax(300px, 620px);
    column-gap: 60px;
    align-items: start;

    max-width: 1250px;
    margin: 0 auto;
}

.photography-image {
    text-align: center;
}

.photography-image img {
    display: block;
    width: 558px;
    max-width: 100%;
    height: auto;
    border: 0;
}

.photography-text {
    padding-top: 10px;
    color: #FFFFFF;
    line-height: 1.5;
}

.photography-text h1 {
    margin: 0 0 25px 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: #FFFFFF;
}

.photography-text p {
    margin: 0 0 18px 0;
}

.photography-question {
    font-weight: bold;
}

.photography-final {
    font-weight: bold;
}


/* =========================================================
   PHOTOGRAPHY-KATEGORIENNAVIGATION
   Vier Rubriken nebeneinander
   ========================================================= */

#photography-category-navigation {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;

    width: 516;
    flex: 0 0 516px;

    margin: 0;
    padding: 0;

    position: relative;
}

/* Kurze Trennlinie */
#photography-category-navigation::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 350px;
    border-top: 1px solid #999999;
}

/* Einzelne Kategorie-GIFs */
.photography-submenu-category {
    display: block;
    flex: 0 0 auto;

    width: 129px;
    height: 18px;

    margin: 0 0 10px 0;
    border: 0;
}

.photography-submenu-category a {
    display: block;
    width: 100%;
    height: 100%;
}

.photography-submenu-category img {
    display: block;
    width: 129px;
    height: 18px;
    border: 0;
}


/* =========================================================
   PHOTOGRAPHY-UNTERSEITEN
   ========================================================= */

.photography-subpage-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}


/* Auswahlmenü */
.photography-submenu {
    width: 220px;
    flex: 0 0 220px;

    margin-left: 20px;
    margin-right: 140px;
}


/* Unterseiten-Links */
.photography-submenu-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.photography-submenu-links a {
    display: block;

    color: #CCCCCC;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;

    text-decoration: none;
}

.photography-submenu-links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.photography-submenu-links a.current {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: underline;
}


/* Textbereich der Unterseiten */
.photography-subpage-text {
    flex: 1;
    min-width: 0;
    max-width: 1050px;

    color: #FFFFFF;
    line-height: 1.7;
}

.photography-subpage-text p {
    margin-top: 0;
    margin-bottom: 18px;
    text-align: justify;
}


/* =========================================================
   RESPONSIVE ANPASSUNG
   ========================================================= */

@media (max-width: 1100px) {

    .photography-intro-content {
        grid-template-columns: 1fr;
        row-gap: 35px;
    }

    .photography-image {
        text-align: center;
    }

    .photography-image img {
        max-width: 558px;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    #photography-category-navigation {
        width: 300px;
        flex: 0 0 300px;
        flex-wrap: wrap;
    }

    .photography-submenu {
        margin-left: 20px;
        margin-right: 80px;
    }

    .photography-subpage-text {
        max-width: none;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .photography-navigation {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
    }

    .photography-intro {
        padding: 25px;
    }

    .photography-text h1 {
        font-size: 21px;
    }

    #photography-category-navigation {
        width: auto;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 40px;
    }

    .photography-subpage-layout {
        display: block;
    }

    .photography-submenu {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .photography-subpage-text {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* =========================================================
   PHOTOGRAPHY-GALERIEN
   ========================================================= */
    .photography-gallery { width: min(1500px, 96%); margin: 2rem auto; color: #eee; }
    .photography-gallery h1 { margin: 0 0 .5rem; }
    .photography-gallery-intro { margin: 0 0 1.25rem; color: #ccc; }
    .photography-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-bottom:1rem; }
    .photography-toolbar button, .photography-toolbar select, .photography-viewer button {
            border:1px solid #666; border-radius:6px; background:#292929; color:#f4f4f4;
            padding:.6rem .85rem; font:inherit; cursor:pointer;
        }
    .photography-toolbar button:hover, .photography-viewer button:hover { background:#444; }
    .photography-status { margin-left:auto; color:#bbb; font-size:.95rem; }
    .photography-viewer { background:#111; border:1px solid #444; border-radius:10px; padding:1rem; }
    .photography-stage { min-height:280px; display:flex; align-items:center; justify-content:center; position:relative; }
    .photography-stage img { display:block; max-width:100%; width:auto; height:auto; max-height: min(68vh, 850px); object-fit:contain; }
    .photography-empty { padding:3rem 1rem; text-align:center; color:#ccc; }
    .photography-caption { display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; padding:.8rem .15rem; color:#ddd; overflow-wrap:anywhere; }
    .photography-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.65rem; padding:.35rem 0 .8rem; }
    .photography-counter { min-width:7rem; text-align:center; color:#eee; }
    .photography-thumbnails { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:.65rem; margin-top:1rem; }
    .photography-thumb { padding:3px; border:2px solid transparent; border-radius:7px; background:#222; cursor:pointer; min-width:0; }
    .photography-thumb[aria-current="true"] { border-color:#ddd; }
    .photography-thumb img { display:block; width:100%; height:82px; object-fit:cover; border-radius:3px; }
    .photography-thumb:focus-visible, .photography-toolbar button:focus-visible, .photography-viewer button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
    .photography-error { color:#ffb5b5; white-space:pre-wrap; }
        @media (max-width:600px) {
            .photography-gallery { width:100%; margin:1.2rem auto; }
            .photography-viewer { border-radius:0; padding:.6rem; }
            .photography-stage { min-height:220px; }
            .photography-stage img { max-height:55vh; }
            .photography-status { width:100%; margin-left:0; }
            .photography-thumbnails { grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:.4rem; }
            .photography-thumb img { height:64px; }
        }
    .photography-stage:fullscreen { background:#000; padding:1rem; }
    .photography-stage:fullscreen img { max-height:calc(100vh - 2rem); }