/* useful css class-room phrases is a small selection for css classes used inside content areas */
/* more on https://github.com/klml/usefulclassroomphrases */
.clear,
.cb { clear:both; }
.cl { clear:left; }
.cr { clear:right; }
.left { float:left;}
.right { float:right;}
.none { float: none !important;}
.marginleft,
img[src$='#left'], /* use blind hash as workaround if class can't set, eg markdown etc */
img.left { float:left;margin:0 5px 5px 0;}
.marginright,
img[src$='#right'],
img.right { float:right;margin:0 0 5px 5px;}
.block { display: block;}
.border { border: 1px solid gray;}
.depot, /* is for htmlsnippets moved and used by JS */
.hidden { display: none; }
.thx, .alerta, .notice { border: 1px solid #8da7cc; border-left-width: 20px;color: green;font-size: 130%;padding: 5px;}
.lead {font-size: 110%;background-color:#F6F6F6;}
/* 2-column for key value lists .row2 is above if you use not changable sections like markdown-lists */
.row2 dl dt {font-weight: bold;}
@media only print, only screen and (min-width: 680px) {
.row2 dl dt {clear: both; float: left; width: 25%;}
.row2 dl dd {float: right; width: 75%; margin-left: 0}
}

/* proportion */
body { font:normal 18px Arial, Helvetica; color:#444; background-color: #F3E8DC ;margin: 0; padding: 0; outline: none;line-height:1.6;}

#header {
    margin-left: 10px;
}
#header img {
     border: 1px solid #fff;
     padding: 2px;
}
#header p {
    font-size: 68%;
}
.main {
    background-color: #fff ;
    padding: 3px 10px;
}


.panel {margin:5px auto;padding:0 10px;max-width:950px;}
.paneloutbreak { display: flex; align-items: center; justify-content: center; }

/* content */
a { text-decoration: underline; color: #0000ee; }
a:visited { color: inherit; }
a:hover { text-decoration: none; }
a:active, /* set class "active" for current pages*/
a.active { color: #2E6465; }
a[href^="#"] { font-style: italic ; } /* anchor links staying on the current page */
a[href^="//"],
a[href^="http"] { background: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E") no-repeat center right; padding-right: 13px; } /* external links */
a[href^="tel:"] { color: inherit; text-decoration: inherit; }
img { border: 0; max-width: 100%;}
ul { list-style:none; list-style-image: url('data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs'); margin-left: 15px;}

p {margin: 0 0 10px 0;}
hr {color:#000;background-color:#000;height:1px;margin: 0 0 2px 0;}
td{vertical-align: text-top;}

input[type='text'], input[type='email'], input[type='tel'], textarea { width: 350px; }
select { width: 356px; }
textarea { height: 200px; }

/* special areas */
.lead {font-size: 110%;background-color:#F6F6F6;}
.border {border: 1px solid gray;}

/* headings*/
h1,h2,h3,h4,h5,h6{color:#000;padding:0; 
    margin:0;}
h1{font-size: 1.6em; font-weight: normal; }
h2{font-size: 1.4em; font-weight: normal; border-bottom: 1px solid #474747; }
h3{font-size: 1.1em; border-bottom: 1px dotted #ccc; }
h4{font-size: 1.1em; font-weight: normal; }
h5{font-size: 1em; }
h6{font-size: 1em; font-weight: normal; font-style: italic; }
h1+h2 {margin-top: 2px;}
h2+h3 {margin-top: 2px;}
h3+h4 {margin-top: 2px;}
h4+h5 {margin-top: 2px;}
h5+h6 {margin-top: 2px;}


/** navigation horizontal **/
#navigation ul {margin:0; padding: 0;}
#navigation ul li {display: inline-block; padding: 5px 10px 0 0;}
/* collapse at breakpoint */
@media only screen and (max-width: 549px) {
    #navigation ul li {display: block; padding: 5px 10px 0 0;}
}

a[href^="https://de.wikipedia.org/wiki/"],
a[href^="https://de.wikipedia.org/wiki/"]:hover {
background: url(" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAQAAABHhr7cAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAXEYAAFxGARSUQ0EAAADASURBVBjTVcwxSwIBAEDhj7skJ5suKnAJHKQxOIkaGiuncLwgCBod+hGO4SARGNQPCBqKwi36Ay4OQhAFdhIFDdliiw2HQW98D17owJmGkVBb07uCS7GBfacmkBiqYMOzbZFjS6g6IsTAlkhHasWmvK6uWTVXPoFDT8qIvTqXR6wOAbjxJUFPX1FOYN092ZxvcxLXli1a8+JHya3JNDO0J2fehQU7Ag9S/2h4s4tVqZaZTIZ/eSRyYuxD0Z3HTP4CsvIvCDNWX5YAAABVdEVYdGNvbW1lbnQARmlsZSBzb3VyY2U6IGh0dHA6Ly9jb21tb25zLndpa2ltZWRpYS5vcmcvd2lraS9GaWxlOkJsYWNrX1dfZm9yX3Byb21vdGlvbi5wbmem556/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTExLTEyVDIxOjUyOjQyKzAwOjAwvCW99QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0xMS0xMlQyMTo1Mjo0MiswMDowMM14BUkAAABGdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuNi45LTcgMjAxMi0wOC0xNyBRMTYgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmecvblIAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAGHRFWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAA0ODD+3uADAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADc1OJtB+6gAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTM1Mjc1NzE2MmZDDo0AAAATdEVYdFRodW1iOjpTaXplADI1LjdLQkJun3kuAAAAM3RFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vdG1wL2xvY2FsY29weV80NGUyYTk1MTI3MDctMS5wbmc5qrZOAAAAAElFTkSuQmCC") right 2px no-repeat !important;
padding: 0 18px 0 0 !important;
margin-right: 3px;
text-decoration: none;
}

/* # standard Media Queries */
 
/* Smaller than standard 950 (devices and browsers) */
@media only screen and (max-width: 949px) {
    #header img { 
        width: 50px;
        margin-top: 5px;
    }
    #header p {
        font-size: 68%;
        float: right;
        margin: 20px;
    }
    #main {
        clear: both;
    }
}