/**
 * Style sheet Stylesheet_WolfvonWaldow, Copyright CompuSense info@CompuSense.de
 */

/* Basic settings */
body { margin:0;line-height: 1.45; padding:0; font-size: var(--rootfz);  text-align:left; position:relative; color: var(--dark); font-family: var(--font)}
body p, body ol{font-family: var(--font)}

form  { margin:0; padding:0; }
img { border:0; }
figure {position: relative; width: fit-content}
li {padding: 5px 0 0 15px !important ;}
.desktopNot {display: none}
h1 {color: var(--grau)}

p {color: var(--dark)}
a{color: var(--rot)}
a:hover {color: var(--dark)}
input {height: auto; font-size: var(--rootfz); color: var(--grau)}
.widget > label {display: none}
.widget {width: 50%}
form button{font-size: var(--rootfz);font-weight: 300;color: var(--dark);padding: var(--absklein) var(--abs);}

.content-table tbody tr:nth-of-type(2n+1) {background-color: #f3f4f4;}
.content-table
th, td {padding: 0.312rem 0.25rem 0.375rem 0.25rem;text-align: left;vertical-align: top; }
strong {}
td {vertical-align:top; padding: 3px 13px 0 0 }
form {margin-bottom: 27px; margin-top: 5px}

.ce_text {width:700px}
p {text-align: justify; hyphens: auto}
#abos td, #abos th {font-size: 0.8em}

.content-element-group img:hover {filter: grayscale(1)}

/*Header*/
#container {}


#container #main {}
#container #main .inside {margin: 0 auto; max-width: var(--total)}
#container #main  h1{ padding: 0; padding-top: var(--abs) }
#container #main  h1.content-headline{padding-top: calc(2*var(--abs))}

.breit {width: var(--breit);margin: 0 auto;max-width: var(--total)}
.mod_article {width: var(--schmal);margin: 0 auto;max-width: 1200px; padding: var(--absklein) 0;}
.mod_article#breit {width: var(--breit);}
header .content-image, #navi .inside {width: var(--breit);max-width: var(--total); margin: 0 auto; }

#navi ul {display: flex;justify-content: flex-end; padding: 0 var(--abs);margin: var(--abs) 0 0 0;}
#navi ul li {margin-left: var(--abs)}
#ksk figure {position: absolute; left: var(--abs); top: 5px }


    /* Navigation */
#navi .mod_navigation {  background-color: rgba(255, 255, 255, 0.5);  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);}

li    {  list-style-type: none; padding: 0;  }
#navi li a  {color: var(--dark); text-decoration: none; }
#navi li a:hover  { color: var(--rot); text-decoration: none;  }
#navi li .active  { color: var(--rot);  text-decoration: none;font-weight: normal;}
#navi li a.trail { color: var(--rot);  text-decoration: none; }


/*dropDown*/
#navi { width:100%; margin:0 auto;position:fixed; top: 0; height:150px;z-index: 99;}

#back ul  li  ul {display: none;background-color: rgba(255, 255, 255, 0.5);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);}
#navi  ul a {text-decoration:none}
#navi  ul a, #main_navi  ul strong{display: block; font-size: 1.1em;ptext-align: center;font-weight: normal}
#navi  ul > li > ul > li a {}
#navi  ul  li:hover  ul {display: block;position: absolute; margin: 0; padding: 0}
#navi  ul  li  ul li {margin: 0}




    /*footer*/
footer {max-width: var(--total);margin:  calc(2*var(--abs)) auto 0 auto;background: var(--grau);line-height: 1;padding-top: calc(0.5*var(--absklein));}
footer ul {display: flex}
footer ul li{margin-left: var(--abs);}
footer li a, footer li a:link, footer li a:visited {color: #fff; text-decoration: none; margin: 0}
footer li a:hover {color: var(--dark)}

/*galerien*/

#flexi  {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

#flexi figure {
    margin: 0;
}

#flexi a {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

#flexi  img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

#flexi a:hover img {
    transform: scale(1.05);
}

#flexi  figcaption {
    margin-top: 8px;
    font-weight: 600;
}
.content-gallery ul {
    columns: 4 220px;
    column-gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    width: 980px;
}

.content-gallery li {
    break-inside: avoid;
    margin: 0 0 12px;
    width: auto !important; /* falls Spaltenbreiten per CSS gesetzt sind */
    float: none !important;
}

.content-gallery figure {
    margin: 0;
}

.content-gallery img {
    width: 100%;
    height: auto;
    display: block;
}
.content-gallery a:hover img {
    transform: scale(1.05);
}