:root {
  --seiten-hf: rgb(255, 255, 244) /*sehr helles Beige*/ ;
  --helle-hf: white;
  --seiten-vf: black;
  --grau-0: rgb(128, 128, 128);
  --grau-1: rgb(190, 190, 190);
  --grau-2: rgb(222, 222, 222);
  --grau-3: rgb(230, 230, 230);
  --grau-4: rgb(242, 242, 242);
  --skala: rgb(254, 145, 107) /*orange*/ ;
  --rot-1: rgb(222, 16, 16);
  --rot-2: rgb(153, 0, 0);
}
/*
Header:           header
Footer:           footer
Formular:         form
Tabelle:          table 

Startseite:       body.startseite
Hohlspeiche:      body.hohlspeiche
Gelesen:          body.gelesen
Impressum:        body.impressum
Datenschutz:      body.datenschutz
Autoren gesucht:  body.autoren-gesucht
Interview:        body.interview
Alle Ausgaben:    body.archiv
FAQ:              body.faq
Über uns:         body.ueber-uns
Suche:            body.suche


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


CSS-BEREICHE

LAYOUT
HACK 1-10
MEDIA QUERY
FORMULARELEMENTE

LAYOUT

body
  .seite
    header
      a
      search
    .wrapper
      .nav-box
        a (nav-anzeigen)
        a (nav-verbergen)
        nav
        nav
      main
        h1
        p
        footer

*/
@media {
  

  
  
  a {
    border-bottom: dotted 1px
  }
  nav a,
  body.suche main a,
  a.position,
  figure a,
  .li a,
  .ueber a:has(img) {
    border-bottom-style: none
  }
  nav a:hover {
    border-bottom-style: dotted
  }
  body.hohlspeiche div.text,
  table {
    background-color: var(--helle-hf)
  }
  body {
    background-color: var(--seiten-hf)
  }
  table thead th {
    background-color: var(--grau-2)
  }
  table tfoot th,
  table tfoot td,
  table.koenigsklasse tbody tr:first-child {
    background-color: var(--grau-3)
  }
  table.zebra tbody tr:nth-child(even),
  form[type=submit] {
    background-color: var(--grau-2)
  }
  body {
    background-image: url(/css/line.svg);
    background-size: 247px 80px;
  }
  body.tobis-fahrradgeschichten p.autor {
    background-image: url(/css/tobis-fahrradgeschichten.jpg)
  }
  body.tobis-fahrradgeschichten p.autor {
    background-position: bottom left
  }
  body.tobis-fahrradgeschichten p.autor {
    background-repeat: no-repeat
  }
  body {
    background-repeat: repeat-x
  }
  body.tobis-fahrradgeschichten p.autor,
  body.tobis-fahrradgeschichten p.autor {
    background-size: 40.00em 17.10em
  } /* Die Höhe entspricht dem Seitenverhältnis im Bild*/
  table {
    border-collapse: collapse
  }
  img[src*="titelbild"],
  img[src$=".png"],
  img[src$=".svg"],
  img.freigestellt /*Freigestelltes JPG*/ ,
  nav.toc,
  table th,
  table td,
  div.betont,
  div.ankuendigung,
  body.hohlspeiche div.text {
    border-color: var(--grau-1);
    border-style: solid;
    border-width: 1px;
  }
  div.ankuendigung,
  div.betont,
  nav.toc {
    border-radius: 0.30em;
  }
  img[src*="schmuck-"],
  table img,
  img[src$="logo.svg"],
  a[title="Startseite"],
  a.cover,
  img[src$=".png"].no-border,
  a:hover[href^="/bilder/"] {
    border-style: none !important
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box
  } /*Reset*/
  table {
    caption-side: bottom
  }
  div.li dt,
  div.ankuendigung {
    clear: both
  }
  a:link {
    color: var(--rot-1)
  }
  a:visited {
    color: var(--rot-2)
  }
  body {
    color: var(--seiten-vf)
  }
  footer {
    color: var(--grau-0)
  }
  strong.symbol /*Bisher nur in "table.koenigsklasse"*/ {
    color: var(--skala)
  }
  nav.ausgaben a.alle-ausgaben::before,
  nav.ausgaben strong::before {
    content: "☰ "
  }
  nav.ausgaben a.aktuelle-ausgabe::before {
    content: "◉ "
  }
  nav.ausgaben a.naechste-ausgabe::before {
    content: "→ "
  }
  nav.ausgaben a.vorherige-ausgabe::before {
    content: "← "
  }
  nav.artikel a.naechster-artikel::after {
    content: " →"
  }
  nav.artikel a.vorheriger-artikel::before {
    content: "← "
  }
  nav.artikel li:has(a.naechster-artikel) {
    text-align: right
  }
  div.li dt::before {
    content: "["
  }
  div.li dt::after {
    content: "]"
  }
  li[id^=an]::before {
    content: "["counter(an) "]\00a0"
  } /*Anmerkung*/
  li[id^=an]::before {
    counter-increment: an
  } /*Anmerkung*/
  div.an ol {
    counter-reset: an
  } /*Anmerkung*/
  label {
    display: block
  }
  td.legende ul,
  td.legende li,
  li[id^=an] p:first-child,
  footer h2,
  footer p {
    display: inline
  }
  figure.buch {
    display: flex
  }
    figure.buch {
    gap: 1rem
  }
  
  figure.buch img {
    flex-shrink: 0; /* Bild behält seine natürliche Breite */
}

figure.buch figcaption {
    flex: 1; /* Nimmt den restlichen Platz ein */
}
  li[id^=an]::before {
    display: inline-block
  }
  table {
    empty-cells: show
  }
  img.flr,
  a.cover,
  body.archiv nav[aria-label$="Archiv"] img {
    float: right
  } /* Margins beachten */
  body {
    font-family: fira-sans, sans-serif
  }
  body.hohlspeiche div.text {
    font-family: fira-mono, monospace
  }
  sub,
  sup,
  table caption,
  body.hohlspeiche div.referenz,
  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.gross th /* Wegen des Gewichts noch um 0.05em gegenüber den TD reduziert*/ {
    font-size: 0.85rem
  }
  span.stadt,
  blockquote p,
  blockquote ul,
  table.gross 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,
   body.suche h2,
  div.li dt /* Weil keine Lösung zur Ausrichtung von dt und dd auf einer Linie bei kleinerer Schriftgröße von dt gefunden wurde*/ {
    font-size: 1.00rem
  }
  h3,
  table.koenigsklasse strong.symbol /*Bisher nur in "table.koenigsklasse"*/ ,
  nav.ausgabe div,
  p.untertitel {
    font-size: 1.30rem
  }
  h2,
  body.startseite a.cover+p+p strong {
    font-size: 1.70rem
  }
  h1,
  body.startseite p.aktuelle-ausgabe strong,
  a[href="https://provelo.fahrradzukunft.de/"] {
    font-size: 2.00rem
  }
  address,
  footer em,
  body.hohlspeiche th.text,
  body.leserbriefe p.autor,
  body.leserbriefe div.antwort em {
    font-style: normal
  }
  footer,
  p.untertitel,
  span.stadt,
  body.leserbriefe div.antwort,
  body.leserbriefe div.antwort,
  span.issn {
    font-style: italic
  }
  a.li,
  div.li dt {
    font-variant: small-caps
  }
  h1,
  h2,
  h3,
  h4,
  dt,
  body.faq p.frage,
  body.interview p.frage,
  nav.ausgabe div,
  body.archiv nav[aria-label$="Archiv"] ol,
  a.position {
    font-weight: bold
  }
  div.li dt::before,
  footer h2,
  div.li dt::after,
  body.archiv nav[aria-label$="Archiv"] ol ol {
    font-weight: normal
  }
  body.tobis-fahrradgeschichten p.autor {
    height: 20.00em
  } /*17.10em plus Höhe für den Autorennamen und etwas Abstand*/
  footer {
    line-height: 1em
  }
  h1,
  h2,
  h3,
  .nav-box,
  nav.toc,
  blockquote *,
  body.hohlspeiche div.text,
  figcaption,
  caption {
    line-height: 1.20
  }
  body {
    line-height: 1.40
  }
  body.ueber-uns ul.redakteure,
  body.impressum ul,
  nav ol,
  div.an ol /*Anmerkung*/ {
    list-style-type: none
  }
  blockquote ul,
  body.archiv nav[aria-label$="Archiv"] ol ol {
    list-style-type: circle
  }
  figure {
    margin-right: 0;
    margin-left: 0;
  }
  .seite,
  td.legende {
    margin-right: auto;
    margin-left: auto;
  }
  body.hohlspeiche div.text+div.referenz 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.ueber img {
    margin-right: 0.60em;
    margin-bottom: 0.60em;
  }
  img.flr,
  a.cover,
  body.archiv nav[aria-label$="Archiv"] img {
    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,
  nav.ausgabe div,
  div.betont,
  div.ankuendigung,
  nav.toc li {
    margin-top: 0.80em;
    margin-bottom: 0.80em;
  }
  nav.ausgabe li,
  nav.service li,
  figure {
    margin-top: 1.00em;
    margin-bottom: 1.00em;
  } /* "in nav.service bleibt es bei einem kleinen Abstand*/
  body.interview div.f-und-a,
  div.betont {
    margin-bottom: 2.30em;
    margin-top: 2.30em;
  }
  body,
  div.betont h2,
  nav.service ol,
  nav.service,
  table.koenigsklasse p:first-child,
  div.betont p:first-child,
  div.ankuendigung p:first-child,
  p.ausgabe,
  body.ueber-uns h1,
  body.faq h1,
  body.archiv h1,
  body.datenschutz h1,
  body.startseite main p:first-of-type,
  body.startseite h1,
  body.startseite main .ankuendigung:first-child {
    margin-top: 0
  }
  textarea {
    margin-top: -0.30em
  }
  p.untertitel {
    margin-top: 0.10em
  } /* Verdeutlicht die Zugehörigkeit zur Überschrift */
  caption,
  nav.service ol li:first-child {
    margin-top: 0.30em
  }
  h2,
  h3,
  h4 {
    margin-top: 1.80em
  }
  footer,
  div.ankuendigung,
  body.leserbriefe div.antwort,
  nav.artikel {
    margin-top: 2.30em
  }
  nav[aria-label$="Archiv"] {
    margin-top: 7.00rem
  }
  h1,
  blockquote li,
  table.koenigsklasse p:last-child,
  div.betont p:last-child,
  div.ankuendigung p:last-child {
    margin-bottom: 0
  }
  nav.toc,
  figcaption {
    margin-bottom: 0.80em
  }
  p.autor,
  body,
  p.untertitel {
    margin-bottom: 2.00em
  }
  div.ankuendigung {
    margin-bottom: 2.30em
  }
  body.hohlspeiche div.hohlspeiche,
  nav.service,
  nav.ausgaben {
    margin-bottom: 3.00em
  }
  nav[aria-label$="Archiv"] li li:last-child {
    margin-bottom: 7.00rem
  }
  div.li dl,
  body.ueber-uns ul.redakteure,
  body.impressum ul,
  nav ol,
  td.legende ul,
  nav.ausgabe div {
    margin-left: 0
  }
  dd {
    margin-left: 1.80em
  }
  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
  }
  figure,
  caption {
    padding: 0
  }
  div.betont,
  table th,
  table td,
  body.hohlspeiche div.text {
    padding: 0.30em
  }
  td.legende {
    padding: 0.50em
  }
  div.betont,
  div.ankuendigung {
    padding: 0.60em;
  }
  nav.toc {
    padding-left: 0.60em;
    padding-right: 0.60em;
  }
  div.referenz {
    padding-top: 0.20em
  }
  img.flr th {
    padding-right: 0
  }
  .nav-box {
    padding-right: 0.50em
  }
  div.li dt,
  td.legende li {
    padding-right: 1.00em
  }
  nav>ol,
  body.ueber-uns ul.redakteure,
  body.impressum ul {
    padding-left: 0
  }
  ol,
  ul {
    padding-left: 2.00em
  }
  .center {
    text-align: center
  }
  td,
  th,
  table caption {
    text-align: left
  }
  li[id^=an]::before,
  td.right,
  body.leserbriefe p.autor {
    text-align: right
  }
  a {
    text-decoration: none
  }
  li[id^=an] {
    text-indent: -1.40em
  } /*Anmerkung: Korrespondiert mit li[id^=an]::before { width: 1.40em } */
  li[id^=an] p {
    text-indent: 0
  }
  td,
  th,
  search {
    vertical-align: top
  }
  sub {
    vertical-align: -0.35em
  }
  sup {
    vertical-align: 0.35em
  }
  a.position {
    vertical-align: 0.1em
  }
  table img {
    vertical-align: bottom
  } /* Sonst kleiner Abstand unter Bild */
  x-formel,
  a.li,
  .no-wrap,
  span.issn,
  [href^="tel:"],
  [href^="mailto:"] {
    white-space: nowrap
  }
  img[src$="logo.svg"] {
    width: 248px;
    height: 80px;
  }
  li[id^=an]::before,
  ol.an li::before {
    width: 1.40em
  } /*Anmerkung: Korrespondiert mit li[id^=an] { text-indent: -1.40em }*/
  .ueber img {
    width: 10em;
    height: auto;
  }
  body.archiv nav[aria-label$="Archiv"] img {
    width: 25%;
    height: auto;
  }
  fz-nnbsp {
    word-spacing: -0.25ex
  }
}
@media { /*LAYOUT*/
  .seite {
    max-width: 62em
  }
  .nav-box {
    width: 20em
  }
  main {
    width: 42em
  }
  header,
  .wrapper {
    display: flex
  }
  header {
    margin-bottom: 3.00em
  }
  main {
    padding-right: 0em;
    padding-left: 2em;
  }
  .wrapper {
    margin-bottom: 0.80em
  }
}
@media { /*HACK 1: BURGER*/
  a[href^="#nav-"] {
    display: none;
  }
}
@media { /* HACK 2: COVER IM ARCHIV */
  nav[aria-label$="Archiv"]>ol>li {
    display: flow-root /*Clearfix für ein rechts floatenden Element: "img" in "body.archiv"*/
  }
}
@media { /*HACK 3: Float für das Bild im Bereich "Zum Autor"*/
  div.ueber p {
    display: flow-root /*Clearfix für ein links floatenden Element: "img" in "div.ueber p"*/
  }
  div.ueber img {
    display: block
  }
  div.ueber img {
    float: left
  }
}
@media { /*HACK 4: SUCHFELD*/
  search {
    text-align: right;
    height: 3.1rem;
    width: 100%;
    padding-top: 0.5rem;
  }
  input[type=search],
  input[type=search]:focus { /*Komprimimiertes und expandiertes Suchfeld*/
    background-repeat: no-repeat;
    background-image: url(/css/lupe.svg);
    background-color: var(--seiten-hf); /* "transparent" funktioniert auf ios nicht */
  }
  input[type=search] { /* Komprimiertes Suchfeld - nur die Lupe wird gezeigt */
    background-size: contain;
    background-position: center;
    cursor: pointer;
    border: none;
    transition: width .3s ease; /*Animiertes Expandieren*/
    color: transparent; /* Bereits eingegebener Text wird unsichtbar */
    width: 3rem;
    height: 3rem;
  }
  input[type=search]::placeholder { /* Platzhalter im komprimierten Zustand ausblenden */
    color: transparent;
  }
  input[type=search]:focus { /* Expandiertes Suchfeld - beim Zustand Fokus */
    background-color: var(--helle-hf);
    cursor: text;
    font-size: 1rem;
    padding-left: 3rem; /* Platz für die Lupe innerhalb des Feldes */
    background-size: auto 90%; /* Höhe des Icons auf 90% der Input-Höhe setzen */
    background-position: left .3rem center; /* Lupe links ausrichten */
    border: 2px solid var(--grau-1);
    border-radius: .2rem;
    outline: none;
    height: 3rem;
    width: 100%;
    max-width: 31rem; /*Maximal die Breite zum Darstellen des Platzhaltertextes. Die Eigenschaft field-sizing: content wird leider noch nicht breit unterstützt */
  }
  input[type=search]:focus::placeholder,
  input[type=search]:focus { /* Platzhalter und eingegebenen Text im expandierten Zustand sichtbar machen */
    color: var(--seiten-vf);
  }
}
@media { /* HACK 5: 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%;
  }
}
@media { /*HACK 6: LATEX*/
  mjx-container {
    font-size: 1em !important;
    text-align: left !important;
    margin: 0 !important;
  }
  x-latex {
    display: inline-block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}
@media { /* HACK 7: Die Angabe des länglichen Codes ist nötig, weil es ein Problem mit der Kaskade gibt. draft.css wird nach default.css interpretiert*/
  footer h2::after {
    content: ":" !important;
    color: var(--grau-0) !important;
    font-size: 0.80rem !important;
  }
}
@media { /* HACK 8: Listen-Icons mit unterschiedlicher Breite */
  nav.ausgaben a::before,
  nav.ausgaben strong::before,
  nav.all a::before,
  nav.all strong::before {
    display: block;
    float: left;
    width: 1.20rem;
    margin-right: 0.5rem;
  }
}
@media { /* HACK 9: Bildplatzhalter werden vom CMS eingefügt, wenn das Bild fehlt. */
  img.missing {
    overflow: hidden
  }
  img.missing {
    height: 300px;
    width: 400px;
  }
  body.editorial img.missing,
  body.startseite img.missing,
  body.gelesen img.missing[src*="cover-"] {
    height: 283px;
    width: 200px;
  }
  div.ueber img.missing,
  img.missing[src*="schmuck-"] {
    height: 140px;
    width: 100px;
  }
  img.missing {
    display: block;
    font-weight: normal;
    font-size: 0.80em;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--rot-1) !important /* !important: damit der Selektor weiter oben für border-color: gray überschrieben wird */ ;
  }
  img.missing {
    margin-bottom: 0.4rem
  }
}
@media { /* HACK 10: Für Sehende verbergen. Hörbarkeit für Blinde erhalten. */
  nav[aria-label="Sprunglink"],
  body.startseite h2 {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 0;
    max-height: 0;
    overflow: hidden;
    display: inline;
  }
}
@media { /* SCHRIFTEN
  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/_font/fira-sans-regular.woff) format("woff");
  }
  @font-face {
    font-family: fira-sans;
    font-style: italic;
    font-weight: normal;
    src: url(/css/_font/fira-sans-regular-italic.woff) format("woff");
  }
  @font-face {
    font-family: fira-sans;
    font-weight: bold;
    src: url(/css/_font/fira-sans-semibold.woff) format("woff");
  }
  @font-face {
    font-family: fira-sans;
    font-style: italic;
    font-weight: bold;
    src: url(/css/_font/fira-sans-semibold-italic.woff) format("woff");
  }
  @font-face {
    font-family: fira-mono;
    src: url(/css/_font/fira-mono-regular.woff) format("woff");
  }
  @font-face {
    font-family: fira-mono;
    font-weight: bold;
    src: url(/css/_font/fira-mono-bold.woff) format("woff");
  }
  @font-face {
    font-family: fontawesome-solid;
    src: url(/css/_font/fa-solid-900.woff2) format(woff2);
  }
  @font-face {
    font-family: fontawesome-regular;
    src: url(/css/_font/fa-regular-400.woff2) format(woff2);
  }
}
@media only screen and (max-width: 59em) { /*inklusive verschiedener HACKS*/
  /* Beginn Regeln für mobile Navigation */
  a[href="#nav-verbergen"]::before {
    content: "✕";
  }
  a[href="#nav-anzeigen"]::before {
    content: "☰";
  }
  a[href="#nav-verbergen"],
  a[href="#nav-anzeigen"]:target {
    display: none;
  }
  a[href="#nav-anzeigen"],
  .nav-box:has(a[href^="#nav-"]:target) nav,
  a[href^="#nav-"]:target~a[href="#nav-verbergen"] {
    display: block;
  }
  .nav-box nav {
    display: none;
  }
  /*CSS ohne Relevanz für die reine Funktion des Burgermenüs*/
  a[href^="#nav-"]:target~nav /*nav ist Geschwister von a*/ {
    animation-name: open;
    animation-duration: 0.8s;
  }
  a[href^="#nav-"] {
    font-size: 3em;
    font-weight: bold;
    border-style: none;
  }
  /* Ende Regeln für mobile Navigation */
  header {
    margin-bottom: 0;
  }
  a.cover {
    float: none;
  }
  table.tablebox { /* Tabellen mit "lokalem" Scrolling */ max-width: 100%;
    overflow: auto;
  }
  header,
  .wrapper {
    flex-direction: column
  }
  .seite {
    max-width: 40em !important;
    margin: 0 auto !important;
  }
  a.cover img {
    height: auto
  }
  .seite {
    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
  }
  .nav-box,
  main {
    width: 100%
  }
  a.cover img {
    width: 25%
  }
}
@media { /* FORMULARELEMENTE: Kann entfernt werden, sobald die PDF-Anmeldung entfernt wurde.  */
  fieldset {
    margin-bottom: 1em;
  }
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea,
  button {
    font-size: 1em;
  }
  input[type="text"],
  input[type="password"],
  input[type="email"] {
    width: 100%;
    height: 2em;
    padding: 0.5em 0.3em;
    margin-bottom: 1em;
  }
  input[type="text"]:last-child,
  input[type="password"]:last-child,
  input[type="email"]:last-child {
    margin-bottom: 0;
  }
  input[type="checkbox"] {
    margin: 0 0.5em 0 0;
  }
  textarea {
    width: 100%;
    padding: 0.5em 0.3em;
    margin-top: 0;
    margin-bottom: 1em;
  }
  textarea:last-child {
    margin-bottom: 0;
  }
  button[type="submit"] {
    border-radius: 0.30em;
    border: 1px solid var(--grau-1);
    padding: 0.5em 1em;
  }
  .form-error {
    margin-bottom: 1em;
    font-style: italic;
  }
  /* Bootstrap styles */
  .mt-1 {
    margin-top: 1em;
  }
  .mt-2 {
    margin-top: 2em;
  }
  /* Formularfehler */
  .invalid-feedback {
    display: block;
    color: red;
    font-style: italic;
  }
  .invalid-feedback .form-error-icon::after {
    content: ":";
  }
  form input,
  form fieldset,
  form textarea {
    border-color: var(--grau-1);
    border-style: solid;
    border-width: 1px;
  }
  form input,
  form textarea,
  form fieldset {
    border-radius: 0.30em;
  }
  textarea,
  input,
  button {
    font-family: fira-sans, sans-serif
  }
  textarea {
    height: 6em
  }
  body.anmelden h1,
  body.passwort-vergessen h1,
  body.registrieren h1,
  body.konto-einstellungen h1,
  body.konto-loeschen h1 {
    margin-top: 0
  }
  textarea {
    vertical-align: top
  }
}
@media print {
  /*
  weitere mögliche Eigenschaften:
  - box-decoration-break
  - Bildgrößen verändern
  - Wortmarke/Logo am Anfang anzeigen
  */
  
  
  header,
  .nav-box,
  footer,
  nav.artikel,
  nav.toc {
    display: none
  }
  * {
    color: black !important;
    background-color: white;
  }
  body {
    font-size: 11pt;
  }
  main {
    padding-left: 0;
    width: 100%;
  }
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
  }
  figure,
  table,
  img {
    break-inside: avoid;
  }
  p, li {
    orphans: 2;
    widows: 2;
  }
  p.ausgabe::before {
    content: "fahrradzukunft.de · "
  }
  
  @page {
        margin: 1cm;
    @bottom-center {
      content: "Seite "counter(page) " von "counter(pages);
    }
  }
}
}