/* --- die Grundformatierungen --- */
html, body { margin: 0; padding: 0; height: 100%; scroll-behavior: smooth; }
body { font-size: 100%; font-family: helvetica,arial,sans-serif; background: url(../../Zubehoer/Oldblackouts/OldBlackoutslogo_aufschwarz.gif); background-repeat: no-repeat; background-position: right top; background-size: 30%; background-color: #000; }
img { width: 100%; height:auto; }
h1 { margin: .2rem 0 .5rem 0; font-size: 1.8rem; font-weight: 900; letter-spacing: .3rem; color: #800000; text-shadow: 2px 2px 4px #999999; }
h2 { margin: 1.2rem 0 .5rem 0; font-size: 1.2rem; font-weight: 700; letter-spacing: .1rem; color: #800000; }
h3 { margin: .6rem 0 0 0; font-size: 1.1rem; color: #800000; }
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; }
td { padding: .2rem .3rem; }
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; }
/* --- die Logos oben --- */
.logosoben { padding: .5rem 1rem .8rem 1rem; background-color: #fff; text-align: center;}
.logosoben img { width:auto;margin:0 1rem;max-height:90px;}
.logosoben a:link { border-bottom:none}
/* --- der Inhaltsbereich --- */
main { background-color: white; padding: .8rem .8rem 1rem .8rem; }
main.homepage { background-color: rgba(255,255,255,0); }
main.homepage .frame-layout-1 { background-color: white; width: 75%; margin: 5rem auto 0 auto; padding: .6rem; border-radius: .5rem; }
/* --- die Bilder --- */
.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 .ce-column { width:100%; margin-bottom:1rem; margin-right:0; }
.ce-textpic.ce-right .ce-gallery[data-ce-columns="1"] {width:50%; margin-top:.45rem; }
.ce-gallery[data-ce-columns="2"] .ce-row .ce-column { width:100%; margin-bottom:1rem; margin-right:0; }
figcaption { margin-top:.3rem; font-size:.8rem; text-align:right; }
/* --- der  Footer --- */
.footer { text-align: center; padding: 1rem 0 1.5rem 0; font-size: .8rem; color: white; line-height: 2; }
.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; }
/* --------------------------------------- das Anmeldeformular --- */
.frame-type-felogin_login { margin: 7% auto 0 auto; }
.frame-type-felogin_login fieldset { border: 0; }
.frame-type-felogin_login legend { display: none; }
.frame-type-felogin_login h1 { display: none; }
.frame-type-felogin_login h2 { display: none; }
.frame-type-felogin_login h3 { display: none; }
.frame-type-felogin_login p {color: #fff; width:95%; margin: 0 auto; }
.frame-type-felogin_login div {margin:1.2rem .5rem 0 .5rem}
.frame-type-felogin_login label { width:100%; color:#FFFFFF; font-weight: bold; line-height:2rem; text-transform: uppercase; letter-spacing: .2rem; }
.frame-type-felogin_login input[type=text] { width: 95%; margin-bottom: 1rem; padding: .5rem; border-radius: .5rem; }
.frame-type-felogin_login input[type=password] { width: 95%; margin-bottom: 1rem; padding: .5rem; border-radius: .5rem; }
.frame-type-felogin_login input[type=submit] { background-color:#a9a9a9; border:none; color:white; font-size:105%; font-weight:bold; text-transform:uppercase; letter-spacing:.2rem; line-height:1.5; padding:1rem 2rem; text-decoration:none; margin:1rem 0; border-radius: .5rem; }
.frame-type-felogin_login input[type=submit]:hover { background-color:#800000; }
/* --------------------------------------- der Abmeldebutton --- */
.abmelden { font-size:.76rem; line-height: 1; text-align:right; }
.abmelden a:link { color:#999; text-decoration:none; }
.abmelden a:visited { color:#999; text-decoration:none; }
.abmelden a:hover { color:#999; background:#fff; text-decoration:underline; }
.abmelden a:active { color:#999; background:#fff; text-decoration:underline; }
/* --------------------------------------- das Tabellenlayout --- */
.ce-table, .ce-table thead, .ce-table tbody, .ce-table th, .ce-table td, .ce-table tr { display: block; width: auto; }
.ce-table tr { margin-bottom: 1rem; border: 1px solid #ccc; padding: 0.5rem; }
.ce-table td { padding: 0.5rem; border: none; border-bottom: 1px solid #eee; position: relative; }
/* ------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------- das MediaQuery ab 1000px --- */
/* ------------------------------------------------------------------------------------------------- */
@media only screen and (min-width:62.5rem) {
/* --- die Logos oben --- */
.logosoben { width:56rem; margin:0 auto; padding-bottom: 1.5rem; }
/* --- die Navigation --- */
nav { width:58rem; margin:0 auto; }
/* --- der Inhaltsbereich --- */
main { width:50rem; margin:0 auto; padding: 1.4rem 4rem 2rem 4rem; border-radius: 0 0 .5rem .5rem; }
main.homepage { width:30rem; }
/* --- die Bilder --- */
.ce-gallery { margin-top:.74rem; } 
.ce-gallery[data-ce-columns="1"] .ce-row .ce-column img { max-width: 40rem; }
.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:47.75%; margin-right: 1.5%; }  
.ce-gallery[data-ce-columns="2"] .ce-row .ce-column:last-child { margin-right: 0; }
/* --------------------------------------- das Anmeldeformular --- */
.frame-type-felogin_login { max-width:30rem; margin-top: 10%; }
/* --------------------------------------- das Tabellenlayout --- */
.ce-table { display: table; width: 100%; border-collapse: collapse; }
.ce-table thead { display: table-header-group; }
.ce-table tbody { display: table-row-group; }
.ce-table tr { display: table-row; border: none; padding: 0; margin: 0; }
.ce-table td, .ce-table th { display: table-cell; border: 1px solid #ccc; padding: 0.5rem; vertical-align: top; }
}