@font-face {
    font-family: 'Fava Black';
    src: url('fonts/fava-black-webfont.eot');
    src: url('fonts/fava-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fava-black-webfont.svg') format('svg'),
         url('fonts/fava-black-webfont.woff') format('woff'),
         url('fonts/fava-black-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/notosans-bold-webfont.eot');
    src: url('fonts/notosans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/notosans-bold-webfont.svg#noto_sansbold') format('svg'),
         url('fonts/notosans-bold-webfont.woff') format('woff'),
         url('fonts/notosans-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/notosans-bolditalic-webfont.eot');
    src: url('fonts/notosans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/notosans-bolditalic-webfont.svg#noto_sansbold_italic') format('svg'),
         url('fonts/notosans-bolditalic-webfont.woff') format('woff'),
         url('fonts/notosans-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/notosans-italic-webfont.eot');
    src: url('fonts/notosans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/notosans-italic-webfont.svg#noto_sansitalic') format('svg'),
         url('fonts/notosans-italic-webfont.woff') format('woff'),
         url('fonts/notosans-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/notosans-regular-webfont.eot');
    src: url('fonts/notosans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/notosans-regular-webfont.svg#noto_sansregular') format('svg'),
         url('fonts/notosans-regular-webfont.woff') format('woff'),
         url('fonts/notosans-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media (min-width: 901px) { div#contentTable aside { display: table-cell; } }
@media (max-width: 900px) { div#contentTable aside { display: none; } }

@media (min-width: 766px) {
    #drawer-toggle-label { display: none; }
    div#contentTable { margin: 3rem auto 0; }
    header [data-type=logo] {
        float: left;
        margin: 0 3rem 0 1.5rem;
    }
    div#contentTable div#inhalt { padding:1rem 1rem 0.3rem 2rem; }
    .suche ol.linklist, .suche ul.artlist { min-width:40rem; }
}

@media (max-width: 765px) {
    #drawer-toggle-label { display: block; }
    header nav > ul { display:none; }
    header div.suche { display:none; }
    #drawer-toggle:checked ~ #mainArea,
    #drawer-toggle:checked ~ #drawer-toggle-label,
    #drawer-toggle:checked ~ header {
        transform: translateX(35%);
    }
    div#contentTable {
        margin: 2rem auto 0;
        table-layout:fixed;
        width:100%;
    }
    div#contentTable div#inhalt { padding:1rem 0.5rem 0.3rem 0.5rem; }
    div#contentTable aside { display: none; }
    header [data-type=logo] {
        float: none;
        text-align:center;
        margin: 0;
    }
}

html {
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    overflow: hidden;
}

body {
    display: block;
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    overflow: hidden;
    font-family: "Noto Sans", Helvetica, Arial, Sans-Serif;
}

img, iframe { border:0; }
code { font-family:monospace; }

i.tovotu { font-family: "Fava Black", "Arial Black", Arial, Sans-Serif; }
i.tovotu b { color: #C31C18; font-weight: inherit; }

div.alert {
    margin: 1em 0; padding: 0.3em;
    border: 1px #000 solid;
    font-family: Serif;
    font-size: 1.5em;
    text-align: center;
    color:#000;
}

#mainArea {
    width: 100%;
    height: 100%;
    transition: all 0.25s ease;
    position: relative;
    z-index: 100;
    transform: translateX(0%);
    box-shadow: -3px 0 3px rgba(0,0,0,0.25);
}

#mainArea > div {
    overflow: auto;
    height: 100%;
    background: #fff;
}

[data-type="navbar"] {
    position: absolute;
    width: 35%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

[data-type="navbar"] div.suche {
    padding: 0; margin: 0;
    white-space: nowrap;
    line-height:2.4rem;
    box-shadow: 0 3px 3px rgba(0,0,0,0.25);
}

[data-type="navbar"] div.suche input[type=text] {
    margin: 0 0 0 0.5rem;
    padding: 0 0 0 1px;
    width: 70%;
    border:1px #aaa solid;
    color:#888;
}

[data-type="navbar"] div.suche input:focus { border:0; outline: none; }

[data-type="navbar"] div.suche input[type=text]:focus {
    box-shadow: 0 0 3px #a00;
    transition: box-shadow 0.5s ease;
}

[data-type="navbar"] div.suche input[type=submit],
header div.suche input[type=submit] {
    vertical-align: -2px;
    width: 22px;
    transform: rotate(-45deg);
    border: 0;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

[data-type="navbar"] > nav > ul {
    width: 100%;
    margin: 0;
    padding: 0;
}

[data-type="navbar"] > nav > ul li {
    color: #fff;
    list-style: none;
    transition: background 0.2s ease;
}

[data-type="navbar"] > nav > ul a.gewaehlt {
    font-weight: bold;
}

[data-type="navbar"] > nav > ul a:active {
    transition: all 0.5s ease;
    font-weight: bold;
}

[data-type="navbar"] > nav > ul a {
    border:0; outline:none;
    text-decoration: none;
    color: #000;
    line-height: 2.3rem;
    text-indent: 2rem;
    padding-right: 0.8rem;
    width: 100%;
    -moz-box-sizing: border-box;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
[data-type="navbar"] > nav > ul ul {
    margin: 0;
    padding: 0 0 0 1rem;
    width: 100%;
}

[data-type="navbar"] > nav > ul > li > a:active { border:0; outline:none; }


/* ###################################################################### */
/* %%%%%%%%%%%%%%%%%% Kopfteil %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ###################################################################### */

header {
    position: absolute;
    top:0; left: 0;
    z-index: 150;
    width: 100%;
    padding:0; margin:0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    background: #fff;
    transition: all 0.25s ease;
}

header a:link, header a:visited { color:#555; text-decoration:none; }
header a:hover { color:#000; }

header [data-type=logo] span { color: #C31C18; font-weight:normal; }
header [data-type=logo] {
    display: block;
    padding: 0;
    font-family: "Fava Black", "Arial Black", Arial, Sans-Serif;
    font-style: italic;
    font-size: 1.5rem;
    font-weight:normal;
    line-height: 2.2rem;
}

#drawer-toggle {
    position: absolute;
    opacity: 0;
}

#drawer-toggle-label {
    transition: all 0.25s ease;
    position: fixed;
    width: 100%;
    height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    z-index: 500;
}

#drawer-toggle-label span {
    display: block;
    font-size: 0;
    width: 2rem;
    height: 2.4rem;
}

#drawer-toggle-label span::before {
    content: "☰";
    display: block;
    font-size: 1.2rem;
    transform: scale(0.7,1.3);
    padding: 0.4rem 0.3rem;
    color: #333;
}

#drawer-toggle-label span:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

header nav > ul {
    padding:0; margin:0;
    list-style:none;
}

header nav > ul > li {
    display: inline-block;
    padding:0; margin:0 2em 0 0;
    line-height: 2.4rem;
}

header nav ul ul {
    list-style: outside none none;
    padding: 0 0.3rem 0.1rem; margin: 0 0 0 -0.3rem;
    line-height: 1.5rem;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.26);
    position: absolute;
    display:none;
}

header nav > ul > li:hover ul {
    display:block;
}

header nav a.gewaehlt { color:#000; }
header nav a.gewaehlt { font-weight:bold; }

header div.suche {
    margin: 0 1rem 0 0;
    padding: 0;
    white-space: nowrap;
    float:right;
    line-height:2.4rem;
}

header div.suche input[type=text] {
    margin: 0 2px 0 0;
    padding: 0 0 0 1px;
    width:117px;
    border:1px #aaa solid;
    color:#888;
}

header div.suche input:focus { border:0; outline: none; }

header div.suche input[type=text]:focus {
    box-shadow: 0 0 3px #a00;
    width: 14rem;
    transition: box-shadow 0.5s ease;
    transition: width 0.3s ease;
}

/* ###################################################################### */
/* %%%%%%%%%%%%%%%%%%% Hauptteil %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ###################################################################### */

div#contentTable {
    display:table;
}
div#contentTable > div {
    display: table-cell;
    vertical-align: top;
    padding: 0;
}

div#contentTable div#inhalt {
    max-width: 50rem;
    overflow: hidden;
}

div#contentTable aside {
    padding: 0 2rem 0 1rem;
    max-width: 25rem;
}

div.seitenzahlen a { text-decoration:none; color:#C31C18; }
div.seitenzahlen {
    text-align:right;
    margin: -1px 0 0; padding: 0 0.4rem 0.6rem; word-spacing:0.6em;
}

fieldset {
    width:100%; border: 0;
    padding:0; margin:0;
    box-sizing: border-box;
}

fieldset h2 {
    margin:0 0 0.5rem; padding:0;
    font-size:1.1rem;
}

fieldset p,
fieldset div.g-recaptcha {
    margin:0 0 0.5rem; padding:0;
}

fieldset p label {
    font-size:0.9rem;
    color: #666;
}

fieldset input[type=text] { width: 60%; }
fieldset textarea { width:100%; height:110px; }
fieldset input[type=text],
fieldset textarea {
     border:1px #eee solid;
     margin:0; padding:0.3em;
     box-sizing: border-box;
}

fieldset input[type=text]:hover,
fieldset textarea:hover {
    border-color: #C31C18;
}

fieldset input[type=text]:focus,
fieldset textarea:focus {
    border-color: #000;
}

fieldset input[type=submit] {
    background-color:#C31C18;
    font-size: 0.85rem;
    padding: 0.3rem 0.4rem;
    border:0; color: #fff;
}

fieldset input.alert,i
fieldset textarea.alert {
    border:1px #C31C18 solid;
    background-color:#FEE;
}

/* %%%%%%%%%%%%%%% Artikelarchiv %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

div.archiv_links a {
    color: #C31C18;
    text-decoration: none;
    font-size: 0.8em;
    margin: 0 0.4em;
}

ul#artikelArchiv {
    list-style:none; margin:1em 0 0; padding:0;
}
ul#artikelArchiv li {
    padding:0.6em 0 0.6em;
}
ul#artikelArchiv li small { font-size:0.8em; }
ul#artikelArchiv li a {
    font-weight:bold; font-size:1.2em; font-family:Serif;
    text-decoration:none; color:#000;
}
ul#artikelArchiv li a:hover { color:#C31C18; }

div#tagwolke a, div#tagwolke a:visited { color: #000; text-decoration:none; }
div#tagwolke a:hover { color:#C31C18; }
div#tagwolke {
    font-size:2em; font-weight:normal;
    padding:0.3em 0.8em; text-align:justify; line-height:1.5em;
    word-spacing:1rem;
}

/* %%%%%%%%%%%%%%% Linkarchiv %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

ul#linkArchiv {
    list-style:none; margin:0; padding:0;
    min-width: 50em;
}

ul#linkArchiv li { padding:0.6em 0.7em; list-style:none; }

ul#linkArchiv li label {
    color:#C00030;
    font-size:0.75em;
    cursor: pointer;
}

ul#linkArchiv li input[type=checkbox] {
    opacity: 0;
    margin: 0;
    width: 0;
    height: 0;
}

ul#linkArchiv li input[type=checkbox]~div {
    display: none;
}

ul#linkArchiv li input[type=checkbox]~div code {
    background-color: #d0e0ff;
    padding: 0.3em 0.4em;
    margin: 0 0.2em;
}

ul#linkArchiv li input[type=checkbox]:checked~div {
    display: inline-block;
    padding: 0.5em;
    background-color: #e0f0ff;
    border: 1px solid #abf;
    margin: 0.5em 0 0 16px;
    font-size: 0.9em;
}

ul#linkArchiv a.linklink {
    color: #000;
    text-decoration:none;
    padding-left:15px;
    background-image: url("images/extern.gif");
    background-repeat:no-repeat;
    background-position:center left;
}

ul#linkArchiv a.linklink:hover { color:#C31C18; }

/* %%%%%%%%%%%%%%% Suche %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.suche h1 { padding:0; margin: 0 0 0.5rem 0; font-size:1.5rem; }
.suche a, .suche a:visited { color:#000; text-decoration:none; }
.suche a:hover { color:#C31C18; }
.suche div.mehr { text-align:right; padding:0 1em 0 0; margin:-3.2rem 0 15px;}
.suche div.mehr a { text-decoration:none;  color:#C31C18; }
.suche ol.linklist, .suche ul.artlist {
    list-style:none; margin:0;
    margin-bottom: 3.5rem;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
    padding: 0.6rem 1rem;
}
.suche ul.artlist li { padding:0 0 0.6em; }
.suche ul.artlist li a.art_titel {
    font-weight:bold; font-family: Serif;
    font-size:1.1rem;
}
.suche ul.artlist li small a { text-decoration:none; color:inherit; }
.suche ul.artlist li small a:hover { color:#000; }
.suche ol.linklist li {
    padding:0.6em 0 0.4em 0.7em; margin:0;
    line-height:1.2rem;
}
.suche ol.linklist a.linklink {
    text-decoration:none;
    padding-right:14px;
    background-image: url("https://tovotu.de/images/extern.gif");
    background-repeat:no-repeat;
    background-position:center right;
}
.suche ul.artlist li.alert,
.suche ol.linklist li.alert {
    color:#000; padding:0.3em 0;
    margin:0; font:normal 17px Serif;
    text-align:center; list-style:none;
}

footer {
    margin: 0.2rem 1rem;
    padding:0;
    font-size:0.9em;
    text-align:center;
    clear: both;
}
footer a { text-decoration:none; }
footer code, footer code a { color:#999; }







/* ########################################################################## */
/* %%%%%%%%%%%%%%% Startseite %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ########################################################################## */

@media (max-width: 750px) {
    .home div#inhalt { display:none; }
    .home div#inhalt_mobile { display:block; }
}

@media (min-width: 751px) {
    .home div#inhalt_mobile { display:none; }
}

.home span.neu {
    font-variant:small-caps; display:block; float:right;
    font-weight:bold; margin:0; padding:0;
    color:#B01C18;
    font-size:0.9em;
}

.home h1 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: normal;
}

.home h1 a,
.home h1 a:visited {
    text-decoration: none;
    color: #000;
}

.home h1 a:hover { color:#C31C18; }

.home table {
    padding:0; margin:0;
    width:100%; border:0;
    border-collapse: collapse;
}
.home table td { width:50%; vertical-align:top;}
.home table tr td:first-child { padding: 0 1rem 1rem 0;}
.home table tr td:last-child { padding: 0 0 1rem 1rem;}

.home .artlist {
    font-size: 0.9em; line-height:1.3em;
}
.home .artlist article {
    margin: 0;
}
.home .artlist.blog article {
    margin: 0 0 1.2rem; padding:0;
}
.home .artlist.blog article:first-child h2 {
    font-size:1.2rem; padding: 0 0 0.5rem 0;
}

.home .artlist article h2 {
    margin:0; padding:0 0 0.2rem 0;
    font-size:1rem;
}

.home .artlist article h2 small {
    font-weight:normal;
    letter-spacing: 0.1rem;
    font-size:0.7rem;
}

.home .artlist article h2 a {
    text-decoration: none;
    color: #000;
}

.home .artlist article h2 a:hover { color:#C31C18; }

.home .artlist article p {
    margin:0;padding:0;
    line-height:1.5em;
}
.home .artlist article div.descr {
    color:#999; font-family: monospace;
    line-height:1.2em;
    margin: 0 0 0.5rem
}

.home .artlist article a.mehr {
    text-decoration:none;
    color: #C31C18;
}
.home .artlist article a.mehr:after {
    content: ">";
    font-weight:bold;
    font-family:monospace;
}

.home ul.kommlist {
    list-style:none; margin:0; padding:0;
    font-size:0.9rem;
    min-width: 20rem;
}
.home .kommlist li {
    margin: 0; padding: 0;
    line-height:1.6em;
}
.home .kommlist li::after {
    content: "";
    display:block;
    clear:both;
    height:0.7rem;
}
.home .kommlist a {
    text-decoration:none; color:#555;
}
.home .kommlist a::after {
    content: "🗩";
    font-weight: bold;
    color: #C55;
    margin-left:0.3em;
    font-size:1.1em;
}
.home .kommlist a:hover { color:#C55; }
.home .kommlist a:hover [role=article_title],
.home .kommlist a:hover [role=author_name] { color:#B00; }
.home .kommlist a [role=content_type] { display:none; }
.home .kommlist a [role=article_title] {
    color:#000;
    font-style: italic;
}
.home .kommlist a [role=author_name] {
    color:#000;
    font-size:0.9em;
    font-weight: bold;
}
.home .kommlist span.zeitpkt {
    display: block;
    float: left;
    text-align: center;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    padding: 0 0 0.2rem;
    margin: 0px 0.6rem 0px 0px;
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-variant: small-caps;
    text-transform: lowercase;
    width: 3.2rem;
    height: 3rem;
}
.home .kommlist span.zeitpkt span { display:block; }
.home .kommlist span.zeitpkt span.jahr {
    background-color: #a00;
    color:#fff;
    font-size:0.8rem;
    padding: 2px 5px;
    margin: 0 0 0.3rem;
}

.home ol.linklist {
    list-style:none; margin:0; padding:0;
    font-size:0.9rem;
    min-width: 20rem;
}
.home .linklist li {
    margin: 0 0 1rem; padding:0 0 0.5ŕem;
    line-height:1.3em;
}
.home .linklist a {
    color: #000;
    text-decoration: none;
    padding-right: 14px;
    background-image: url(images/extern.gif);
    background-repeat:no-repeat;
    background-position:center right;
}

.home .linklist a:hover { color:#C31C18; }

div#inhalt_mobile {
    padding:1rem 0 0; margin:2rem 0 0;
}
div#inhalt_mobile article {
    padding: 0 1rem; margin:0 0 1.3rem;
    font-weight:normal;
}
div#inhalt_mobile h2 {
    font-weight:normal;
    font-size:0.85rem;
    margin:0; padding: 0;
}
div#inhalt_mobile time {
    font-style:normal; font-size:0.8rem;
    color: #555; letter-spacing: 0.1rem;
}
div#inhalt_mobile i { font-size:0.9em; }
div#inhalt_mobile .aktuell { letter-spacing:2px; }
div#inhalt_mobile a { color:#000; text-decoration:none; }
div#inhalt_mobile a [role=author_name] {
    font-weight: bold;
    font-size: 0.9rem;
}
div#inhalt_mobile a [role=article_title] {
    font-style: italic;
}
div#inhalt_mobile a [role=article_title]::after {
    content: "🗩";
    font-weight: bold;
    color: #C55;
    margin-left:0.3em;
    font-size:1.1em;
}
div#inhalt_mobile b a, div#inhalt_mobile b a:link {
    text-decoration:none; font-family:Serif; font-size:1.5em;
}

div#inhalt_mobile a.linklink {
    background: center right transparent url("images/extern.gif") no-repeat;
    padding-right:12px;
}