/* --- die Grundformatierungen --- */
html, body { margin: 0; padding: 0; height: 100%; scroll-behavior: smooth; }
body { font-size: 100%; font-family: helvetica,arial,sans-serif; color:black; }
img { width: 100%; height:auto; }
.container { display: grid; grid-template-rows: auto auto auto 1fr; height: 100vh; }
h1 { margin: 1rem 0 0 0; font-size: 1.9rem; color: darkslategray; }
h2 { margin: 1rem 0 0 0; font-size: 1.5rem; color: darkslategray; }
h3 { margin: .6rem 0 0 0; font-size: 1.1rem; color: darkslategray; }
p { margin: .5rem 0; line-height: 1.5; }
ul { margin-top: .6rem; margin-bottom: .6rem; padding-left: 2rem; line-height: 1.5; }
ol { margin-top: .6rem; margin-bottom: .6rem; padding-left: 2rem; line-height: 1.5; }
a:link { color: #9d1927; text-decoration: none; }
a:visited { color:#9d1927; text-decoration: none; }
a:hover { color:#9d1927; text-decoration: underline; }
a:active { color: #9d1927; text-decoration: underline; }
/* --- das Logo --- */
.logo { text-align: center; background-color: darkslategray; padding-bottom: .2rem;  }
.logo img { width: 70%; }
/* --- der Inhaltsbereich --- */
.main { background-color: white; padding: 0 .8rem 1rem .8rem; }
/* --- die Bilder --- */
.ce-gallery {margin-top:.74rem} 
.ce-gallery[data-ce-columns="1"] {width:100%}
.ce-gallery[data-ce-columns="1"] .ce-row {margin-bottom:0}
.ce-gallery[data-ce-columns="1"] .ce-row img {}
.ce-gallery[data-ce-columns="1"] .ce-row .ce-column {width:100%;margin-bottom:.4rem;margin-right:0}
.ce-gallery[data-ce-columns="2"] {width:100%}
.ce-gallery[data-ce-columns="2"] .ce-row {margin-bottom:0}
.ce-gallery[data-ce-columns="2"] .ce-row img {}
.ce-gallery[data-ce-columns="2"] .ce-row .ce-column {width:100%;margin-bottom:.4rem;margin-right:0}
.ce-gallery[data-ce-columns="3"] {width:100%}
.ce-gallery[data-ce-columns="3"] .ce-row {margin-bottom:0}
.ce-gallery[data-ce-columns="3"] .ce-row img {}
.ce-gallery[data-ce-columns="3"] .ce-row .ce-column {width:100%;margin-bottom:.4rem;margin-right:0}
.ce-gallery[data-ce-columns="4"] {width:100%}
.ce-gallery[data-ce-columns="4"] .ce-row {margin-bottom:0}
.ce-gallery[data-ce-columns="4"] .ce-row img {}
.ce-gallery[data-ce-columns="4"] .ce-row .ce-column {width:100%;margin-bottom:.4rem;margin-right:0}
.ce-center .image, .ce-center .image img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; }
.frame-layout-1 .ce-textpic.ce-left.ce-intext .ce-gallery[data-ce-columns="1"] {width:100%;margin-right:0}
.frame-layout-1 .ce-textpic.ce-right.ce-intext .ce-gallery[data-ce-columns="1"] {width:100%;margin-left:0}
figcaption {margin-top:.2rem;font-size:.8rem;text-align:right}
/* --- die Iframes --- */
iframe {max-width:100%; }
.embed-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; width:100%; height:auto; }
.embed-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
/* --- der  Footer --- */
.footer { display: flex; justify-content: center; align-items: center; text-align: center; background-color: darkslategray; padding: .9rem 0 1.7rem 0; font-size: .8rem; color: white; line-height: 2; border-top: 1rem solid #9d1927; }
.footer a:link { color: white; text-decoration: none; }
.footer a:visited { color:white; text-decoration: none; }
.footer a:hover { color:white; text-decoration: underline; }
.footer a:active { color: white; text-decoration: underline; }
/* --- der Insta-Button --- */
.instagram-button { padding: .8rem 1rem; font-size: .85rem; font-weight: bold; cursor: pointer; background-color: #9d1927; color: white; border: none; border-radius: 4px; transition: background-color 0.3s ease; }
.instagram-button:hover { background-color: #7a141f; }
/* --- die Videos --- */
figure.video { width: 100%; max-width: 1000px; margin: 0 auto; }
.video-embed { width: 100%; }
.video-embed video { width: 100% !important; height: auto !important; max-width: 100%; display: block; }
/* ------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------- das MediaQuery ab 1000px --- */
/* ------------------------------------------------------------------------------------------------- */
@media only screen and (min-width:62.5rem) {
    /* --- das Logo --- */
.logo { padding-bottom: .5rem; }
.logo img { width: 20%; }
/* --- der Inhaltsbereich --- */
.main { width:56rem; margin:0 auto; padding: 1.75rem 0 1.5rem 0;  }
/* --- die Bilder --- */
.ce-textpic.ce-left.ce-intext .ce-gallery[data-ce-columns="1"] {width:40%;margin-right:1.6rem}
.ce-textpic.ce-right.ce-intext .ce-gallery[data-ce-columns="1"] {width:40%;margin-left:1.6rem}
.ce-gallery[data-ce-columns="2"] .ce-row .ce-column {width:45.325%;margin-right:3.5%}  
.ce-gallery[data-ce-columns="2"] .ce-row .ce-column:last-child {margin-right:0}
.ce-gallery[data-ce-columns="3"] .ce-row {margin-bottom:3.5%}  
.ce-gallery[data-ce-columns="3"] .ce-row .ce-column {width:31%;margin-right:3.5%}  
.ce-gallery[data-ce-columns="3"] .ce-row .ce-column:last-child {margin-right:0}  
.ce-gallery[data-ce-columns="4"] .ce-row .ce-column {width:22.37%;margin-right:3.5%}    
.ce-gallery[data-ce-columns="4"] .ce-row .ce-column:last-child {margin-right:0}
.frame-layout-1 .ce-textpic.ce-left.ce-intext .ce-gallery[data-ce-columns="1"] {width:20%;margin-right:1.6rem}
.frame-layout-1 .ce-textpic.ce-right.ce-intext .ce-gallery[data-ce-columns="1"] {width:20%;margin-right:1.6rem}
/* --- der  Footer --- */
.footer { padding-bottom: 1rem; }
}