/*
Das Voranstellen von "body" erleichtert den Überblick über Selektoren, die nur auf spezifischen Seiten gelten sollen.

Wenn ein einzelner Selektoren innerhalb einer Gruppe von Selektoren kommentiert werden soll, steht der Kommentar direkt vor dem Komma.
*/

@media all {
  

#body { display: flex; flex-direction: column; }
div#nav { order: 2; }
main { order: 1; flex: 1; }
  
/*Copyright (c) 2014, Mozilla Foundation https://mozilla.org/ with Reserved Font Name Fira Sans. The font Software is licensed under the SIL Open Font License, Version 1.1. http://scripts.sil.org/OFL */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: normal; src: url(/css/fira-sans-regular.woff) format("woff"); }
@font-face { font-family: "Fira Sans"; font-style: italic; font-weight: normal; src: url(/css/fira-sans-regular-italic.woff) format("woff"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: bold; src: url(/css/fira-sans-semibold.woff) format("woff"); }
/*@font-face { font-family: "Fira Sans"; font-style: italic; font-weight: bold; src: url(/css/fira-sans-semibold-italic.woff) format("woff"); } Bisher kommt die Kombination nicht vor*/
@font-face { font-family: "Fira Mono"; font-style: normal; font-weight: normal; src: url(/css/fira-mono-regular.woff) format("woff"); }
@font-face { font-family: "Fira Mono"; font-style: normal; font-weight: bold; src: url(/css/fira-mono-bold.woff) format("woff"); }

body.hohlspeiche div.text,
table.data { background-color: white }

body { background-color: rgb(255,255,244) }

table.data thead th { background-color: rgb(222,222,222) }

table.data tfoot th,
table.data tfoot td,
table.koenigsklasse tbody tr:first-child { background-color: rgb(230,230,230) }

table.data.zebra tbody tr:nth-child(even),
form[type=submit] { background-color: rgb(242,242,242) }

input#search { background-image: url(/bilder/lupe-suche.png) }

body { background-image: url(/bilder/line.svg); background-size: 247px 80px; }

body.tobis-fahrradgeschichten p.author { background-image: url(/bilder/tobis-fahrradgeschichten.jpg) }

body.tobis-fahrradgeschichten p.author { background-position: bottom left }

input#search { background-position: center right }

body.tobis-fahrradgeschichten p.author,
input#search { background-repeat: no-repeat }

body { background-repeat: repeat-x }

body.tobis-fahrradgeschichten p.author,
body.tobis-fahrradgeschichten p.author { background-size: 40.00em 17.10em } /* Die Höhe entspricht dem Seitenverhältnis im Bild*/

input#search { background-size: 1.50em 1.50em }

table { border-collapse: collapse }

a { border-bottom-color: rgb(222,16,16) }

main img[src*="titelbild"],
main img[src$=".png"],
main img.isolated /*Freigestelltes JPG*/,
nav.toc,
table.data th,
table.data td,
div.emphasized,
div.announcement,
body.hohlspeiche div.text,
form input,
form fieldset,
form textarea { border-color: rgb(190,190,190); border-style: solid; border-width: 1px; }

div.announcement,
div.emphasized,
nav.toc,
form input,
form textarea,
form fieldset { border-radius: 0.30em; }

main img[src*="schmuck-"],
main img[src*="formel-"],
table.data img,
a#logo img,
a#logo,
main img[src$=".png"].no-border,
a:hover[href^="/bilder/"] { border-style: none }

a:hover,
a:active { border-bottom-style: solid }

a:hover,
a:active { border-bottom-width: 1px }

*,
*::before,
*::after { box-sizing: border-box } /*Reset*/

table.data { caption-side: bottom }

div.li dt,
div.announcement { clear: both }

body { color: black }

a:link { color: rgb(222,16,16) /*rot*/ }

a:visited { color: rgb(153,0,0) /*dunkelrot*/ }

span.triangle /*Bisher nur in "table.koenigsklasse"*/,
footer { color: gray }

strong.symbol { color: rgb(254,145,107) /*orange*/ } /*Bisher nur in "table.koenigsklasse"*/

div.li dt::before { content: "[" }

div.li dt::after { content: "]" }

footer h2::after { content: ":" !important; font-family: "Fira Sans", sans-serif !important; color: rgb(128, 128, 128) !important; font-size: 0.80rem !important; } /* Die Angabe des länglichen Codes ist nötig, weil es ein Problem mit der Kaskade gibt. draft.css wird nach default.css interpretiert*/

span.publication-date::before { content: "· " }

li[id^=an]::before,
ol.an li::before { content: "[" counter(an) "] " } /*Anmerkung*/

li[id^=an]::before,
ol.an li::before { counter-increment: an; } /*Anmerkung*/

div.an ol,
ol.an { counter-reset: an } /*Anmerkung*/

div.about img,
div.li img,
label { display: block }


td.legend ul,
td.legend li,
li[id^=an] p:first-child,
footer h2,
footer p { display: inline }

li[id^=an]::before,
ol.an li::before { display: inline-block }


table { empty-cells: show }

div.about img,
div.li img,
div.li dt { float: left } /* Margins beachten */

img.flr,
a.cover { float: right } /* Margins beachten */

body,
textarea { font-family: "Fira Sans", sans-serif }

body.hohlspeiche div.text { font-family: "Fira Mono", monospace }
body.hohlspeiche div.text { font-family: "Fira Mono", monospace }

sub,
sup,
table.data caption,
body.hohlspeiche div.reference,
footer h2,
body.imprint footer h2,
footer p,
nav.toc li,
figcaption /* Nur Kindelemente von toc kleiner, da sich der Außenabstand daraus ableitet. Er soll dem Außenabstand anderer Elemente mit Außenabstand 0.80em entsprechen */ { font-size: 0.80em }


div.li dt,
table.data.big th /* Wegen des Gewichts noch um 0.05em gegenüber den TD reduziert*/ { font-size: 0.85rem }

body.imprint span.town,
body.ueber-uns span.town,
blockquote p,
blockquote ul,
table.data.big td { font-size: 0.90rem } /* Nur Kindelemente von blockquote kleiner, da sich der Außenabstand daraus ableitet. Er soll dem Außenabstand anderer Elemente mit Außenabstand 0.80em entsprechen */

body,
h4,
div.li dt /* Weil keine Lösung zur Ausrichtung von dt und dd auf einer Linie bei kleinerer Schriftgröße von dt gefunden wurde*/,
body.home p.alternatives strong,
form[action$="/registrierung/"] input,
form[action$="/registrierung/"] textarea { font-size: 1.00rem }

h3,
form.search input,
strong.symbol /*Bisher nur in "table.koenigsklasse"*/,
div.navtitle, p.subtitle  { font-size: 1.30rem }

h2 { font-size: 1.70rem }

h1, body.home p.actual strong,
body.home a.cover + p strong { font-size: 2.50rem }

address,
footer em,
div.interview div.answer,
body.hohlspeiche th.text,
body.letter-to-editor p.author,
div.reply em { font-style: normal }

footer,
p.subtitle,
span.publication-date,
body.imprint span.town,
body.ueber-uns span.town,
body.letter-to-editor div.reply p.author,
body.letter-to-editor div.reply,
body.letter-to-editor div.answer,
span.issn { font-style: italic }

a.li,
div.li dt { font-variant: small-caps }

h1,
h2,
h3,
h4,
dt,
body.faq p.faq-question,
body.registration p.faq-question,
div.interview p.question,
div.navtitle { font-weight: bold }


div.li dt::before,
footer h2,
div.li dt::after { font-weight: normal }

textarea { height: 6em }

input#search { height: 2.00em }

body.tobis-fahrradgeschichten p.author { height: 20.00em } /*17.10em plus Höhe für den Autorennamen und etwas Abstand*/

footer { line-height: 1em }

table.archive>tbody>tr>th:first-child { hyphens: auto }


h1,h2,h3,
div#nav,
nav.toc,
blockquote *,
body.hohlspeiche div.text,
figcaption, caption { line-height: 1.20 }

body { line-height: 1.40 }

body.ueber-uns ul,
body.imprint ul,
nav ol,
div.an ol /*Anmerkung*/,
ol.an /*Anmerkung in TABLE*/ { list-style-type: none }

blockquote ul { list-style-type: circle }

figure { margin-right: 0; margin-left: 0; }

div#page,
legend { margin-right: auto; margin-left: auto; }

body.hohlspeiche div.text + div.reference p,
blockquote li { margin-top: 0; margin-bottom: 0; }

ul ul,
ul ul ul,
ol ol,
ol ol ol,
li,
dt { margin-top: 0.30em; margin-bottom: 0.30em; }

div.about img,
body.read div.li img { margin-right: 0.60em; margin-bottom: 0.60em; }

img.flr, a.cover { margin-left: 0.60em; margin-bottom: 0.60em; }

blockquote { margin-right: 0.80em; margin-left: 0.80em; }

p,
address,
blockquote,
ul,
ol,
dl,
nav,
footer,
table,
div.navtitle,
div.emphasized,
div.announcement,
nav.toc li,
form[action$="/registrierung/"] label { margin-top: 0.80em; margin-bottom: 0.80em; }

nav.issue li, figure { margin-top: 1.00em; margin-bottom: 1.00em; } /* "in nav.service-nav bleibt es bei einem kleinen Abstand*/

div.interview div.q-and-a { margin-bottom: 2.30em; margin-top: 2.30em; }

body,
div.emphasized h2,
nav.service ol,
  nav.service ol,
table.koenigsklasse p:first-child,
div.emphasized p:first-child,
div.announcement p:first-child{ margin-top: 0 }

textarea { margin-top: -0.30em }

p.subtitle { margin-top: 0.10em } /* Verdeutlicht die Zugehörigkeit zur Überschrift */
caption { margin-top: 0.30em }
h2,
h3,
h4 { margin-top: 1.80em }

footer,
body.home div.announcement,
body.editorial div.announcement,
body.letter-to-editor div.reply{ margin-top: 2.30em }

h1,
blockquote li,
table.koenigsklasse p:last-child, 
div.emphasized p:last-child,
div.announcement p:last-child{ margin-bottom: 0 }

header,
nav.toc, figcaption { margin-bottom: 0.80em } 

p.author,
body,
fieldset, p.subtitle { margin-bottom: 2.00em }

body.hohlspeiche div.hohlspeiche, nav.service { margin-bottom: 3.00em }

div.li dl,
body.ueber-uns ul,
body.imprint ul,
nav ol,
td.legend ul,
div.navtitle{ margin-left: 0 }

dd { margin-left: 1.80em }

div#page { max-width: 62em }

a { outline: 0 } /*Keinen gepunkteten Rahmen um das Bild, wenn der Bildlink besucht wurde oder bei Links, die per Tab den Fokus erhalten. */

body { overflow-y: scroll }

img.missing { overflow: hidden }

figure, caption { padding: 0 }
  
div.emphasized,
form[action$="/zugang/"] input,
form[action$="/registrierung/"] input,
form[action$="/registrierung/"] textarea,
table.data th,
table.data td,
body.hohlspeiche div.text { padding: 0.30em }

legend { padding: 0.50em }

div.emphasized,
div.announcement { padding: 0.60em; }

main { padding-right: 2em; padding-left: 0; }

nav.toc { padding-left: 0.60em; padding-right: 0.60em; }

div.reference { padding-top: 0.20em }

form.search { padding-top: 0.80em }

table.account span:last-child,
img.flr th { padding-right: 0 }

div#nav { padding-right: 0.50em }

div.li dt,
table.account span,
td.legend li { padding-right: 1.00em }

input#search { padding-right: 2.30em }

nav > ol,
body.ueber-uns ul,
body.imprint ul{ padding-left: 0 }

input#search { padding-left: 0.30em }

ol,ul { padding-left: 2.00em }

td,
th,
table.data caption { text-align: left }

li[id^=an]::before,
form.search,
td.right,
body.letter-to-editor p.author,
body.registration label { text-align: right }

a { text-decoration: none }

li[id^=an],
ol.an li { text-indent: -1.40em } /*Anmerkung: Korrespondiert mit li[id^=an]::before { width: 1.40em } */

li[id^=an] p { text-indent: 0 }

td,
th,
form.search,
div#nav, /*wg. table-cell*/
main,
textarea { vertical-align: top } /*textarea: wirkt auf inhalt von label*/

sub { vertical-align: -0.35em }

sup { vertical-align: 0.35em }


table.data img { vertical-align: bottom } /* Sonst kleiner Abstand unter Bild */

form.search,
table.account,
span.nnbsp,
span.formula,
p.formula,
a.li,
td.no-wrap,
span.issn,
[href^="tel:"],
[href^="mailto:"] { white-space: nowrap }

a#logo img { width: 248px; height: 80px; }

header { width: 100% }

li[id^=an]::before,
ol.an li::before { width: 1.40em } /*Anmerkung: Korrespondiert mit li[id^=an] { text-indent: -1.40em }*/

.about img { width: 10em; height: auto; } 

input#search { max-width: 14.00em }

form[action$="/registrierung/"] input[type=text],
form[action$="/registrierung/"] textarea { width: 20.00em }

div#nav { width: 20em } /* Breite des Logos */

main { width: 42em }

span.nnbsp { word-spacing: -0.25ex } /* Alt: -0.35ex*/
}

@media all { /* Hack: Bildplatzhalter werden vom CMS eingefügt, wenn das Bild fehlt. */

body.editorial img.missing,
body.home img.missing { height: 283px; width: 200px; }

img.missing { height: 300px; width: 400px; display: block; font-weight: normal; font-size: 0.80em; border: solid 1px rgb(222,16,16) !important /* !important: damit der Selektor mit höherer Spezifität für border-color: gray überschrieben wird */; }

div.about img.missing, img.missing[src*="schmuck"] { height: 140px; width: 100px }
}

@media all { /*Hack: Easyclearing für 2 Fälle eines links floatenden Elementes: 1) "img" in "div.about p"; 2) "img" in "div.li p" Siehe http://nicolasgallagher.com/micro-clearfix-hack/ */

div.about p:before,
div.li p:before,
div.about p:after,
div.li p:after { content: " "; display: table; }

div.about p:after,
div.li p:after { clear: both }
}

@media all { /* Hack: Links für Sehende verbergen. Für Blinde ausgeben. */
nav.skip,
body.home h2,
form.search label,
form.search [type=submit] { position: absolute; left: -10000px; top: -10000px; width: 0; max-height: 0; overflow: hidden; display: inline; }
}

@media all { /* Hack: Skip-Links für Tab-Navigation sichtbar schalten */
nav.skip a:active { position: static; left: 0; top: 0; } 
}

@media only screen and (max-width: 59em) {

.tablebox { /* Tabellen mit "lokalem" Scrolling */ max-width: 100%; overflow: auto; }


form.search,
a#logo { display: block }

div#page { max-width:40em !important; margin:0 auto !important; }

form.search { text-align: left }

a.cover { float: none }

a.cover img { height: auto }

div#page { margin-right: 0.50em; margin-left: 0.50em; } 

a.cover { padding: 0; margin: 0; }

main { padding-right: 0; padding-left:0; }

main { padding-top: 2em !important }

div#nav,
input#search,
main,
a.cover img { width: 100% }
}

/* Neues Bildlayout */

[class*="width"] { height: auto; min-width: 10em; }

.width10 { width: 10%; }
.width15 { width: 15%; }
.width20 { width: 20%; }
.width25 { width: 25%; }
.width30 { width: 30%; }
.width35 { width: 35%; }
.width40 { width: 40%; }
.width45 { width: 45%; }
.width50 { width: 50%; }
.width55 { width: 55%; }
.width60 { width: 60%; }
.width65 { width: 65%; }
.width70 { width: 70%; }
.width75 { width: 75%; }
.width80 { width: 80%; }
.width85 { width: 85%; }
.width90 { width: 90%; }
.width95 { width: 95%; }
.width100 { width: 100%; }