/*
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 {

/*Noch einpflegen*/
body.interview h2.interviewee { font-style: italic; } 

/*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"); }
@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 { background-color: white }

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

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

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

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

form.search input[name="q"]  { 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 }

form.search input[name="q"]  { background-position: center right }

body.tobis-fahrradgeschichten p.author,
form.search input[name="q"]  { 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*/

form.search input[name="q"]  { 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 th,
table 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 img,
a.logo img,
a.logo,
a.cover,
main img[src$=".png"].no-border,
a:hover[href^="/bilder/"] { border-style: none !important}

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

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

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

table { 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*/

li[id^=an]::before,
ol.an li::before { content: "[" counter(an) "]\00a0" } /*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 }

header,
div.wrapper-1 { display: table }


form.search,
div.wrapper-2 { display: table-cell }

table { empty-cells: show }

div.about img,
div.li img { 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 caption,
body.hohlspeiche div.reference,
footer h2,
body.impressum 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.big th /* Wegen des Gewichts noch um 0.05em gegenüber den TD reduziert*/ { font-size: 0.85rem }

body.impressum span.town,
body.ueber-uns span.town,
blockquote p,
blockquote ul,
table.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,
body.hohlspeiche th.text,
body.leserbriefe p.author,
div.reply em { font-style: normal }

footer,
p.subtitle,
body.impressum span.town,
body.ueber-uns span.town,
body.leserbriefe div.reply p.author,
body.leserbriefe div.reply,
body.leserbriefe 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.registrierung p.faq-question,
body.interview p.question,
div.navtitle,
body.archiv nav.archive ol { font-weight: bold }


div.li dt::before,
footer h2,
div.li dt::after,body.archiv nav.archive ol ol { font-weight: normal }

textarea { height: 6em }

form.search input[name="q"]  { 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 }




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

body { line-height: 1.40 }

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

blockquote ul,
body.archiv nav.archive ol ol { list-style-type: circle }


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

div.wrapper-0,
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.gelesen 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*/

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

body,
div.emphasized h2,
nav.service ol,
nav.service,
table.koenigsklasse p:first-child,
div.emphasized p:first-child,
div.announcement p:first-child,
p.issue,
body.ueber-uns h1, body.faq h1, body.archiv h1, body.datenschutz h1, body.home main p:first-of-type{ 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.leserbriefe 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.impressum ul,
nav ol,
td.legend ul,
div.navtitle{ margin-left: 0 }

dd { margin-left: 1.80em }

div.wrapper-0 { 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 th,
table td,
body.hohlspeiche div.text { padding: 0.30em }

legend { padding: 0.50em }

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

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

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.wrapper-2 { padding-right: 0.50em }

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

form.search input[name="q"]  { padding-right: 2.30em }

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

form.search input[name="q"]  { padding-left: 0.30em }

ol,ul { padding-left: 2.00em }

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

li[id^=an]::before,
form.search,
td.right,
body.leserbriefe p.author,
body.registrierung 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.wrapper-2, /*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 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; } 

form.search input[name="q"]  { max-width: 14.00em }

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

div.wrapper-2 { 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; }

div.wrapper-1,
div.wrapper-2, /*wg. table-cell*/
main,
form.search,
a.logo { display: block }

div.wrapper-0 { max-width:40em !important; margin:0 auto !important; }

form.search { text-align: left }

a.cover { float: none }

a.cover img { height: auto }

div.wrapper-0 { 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.wrapper-2,
form.search input[name="q"] ,
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%; }