/* Batteriepass pages after the look of a Wikipedia article (Vector 2022).
   The appearance classes on <html> (text-klein/-gross, breite-breit,
   farbe-hell/-dunkel) come from appearance.js and the inline head script. */

:root {
   color-scheme: light;
   --bg-page: #ffffff;
   --bg-tint: #f8f9fa;
   --bg-th: #eaecf0;
   --bg-notice: #fbfbfb;
   --text: #202122;
   --text-muted: #54595d;
   --text-locked: #72777d;
   --border: #a2a9b1;
   --border-light: #c8ccd1;
   --border-faint: #eaecf0;
   --link: #3366cc;
   --link-visited: #795cb2;
   --notice-bar: #3366cc;
   --logo-mark: #100F22;
}

/* Dunkle Farbwelt nur am Bildschirm; Druck bleibt hell */
@media screen and (prefers-color-scheme: dark)
{
   :root:not(.farbe-hell) {
      color-scheme: dark;
      --bg-page: #101418;
      --bg-tint: #1b1f24;
      --bg-th: #24292e;
      --bg-notice: #171b20;
      --text: #eaecf0;
      --text-muted: #a2a9b1;
      --text-locked: #7d858d;
      --border: #54595d;
      --border-light: #444a50;
      --border-faint: #2f353b;
      /* 4.5:1 against every background and 3:1 against the body text, WCAG G183. */
      --link: #5884d8;
      --link-visited: #9078c8;
      --notice-bar: #6485d1;
      --logo-mark: #eaecf0;
   }
}

@media screen
{
   :root.farbe-dunkel {
      color-scheme: dark;
      --bg-page: #101418;
      --bg-tint: #1b1f24;
      --bg-th: #24292e;
      --bg-notice: #171b20;
      --text: #eaecf0;
      --text-muted: #a2a9b1;
      --text-locked: #7d858d;
      --border: #54595d;
      --border-light: #444a50;
      --border-faint: #2f353b;
      /* 4.5:1 against every background and 3:1 against the body text, WCAG G183. */
      --link: #5884d8;
      --link-visited: #9078c8;
      --notice-bar: #6485d1;
      --logo-mark: #eaecf0;
   }
}

@media all
{
   /* text-size-adjust: iOS-Safari vergroesserte die Stufe "Klein" sonst wieder */
   html {
      background-color: var(--bg-page);
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
   }
   body {
      margin: 0em auto;
      max-width: 96em;
      min-height: 100vh;
      padding: 0em 1.75em 2em 1.75em;
      background-color: var(--bg-page);
      color: var(--text);
      font-family: "Helvetica Neue", "Liberation Sans", Helvetica, Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.6;
      text-align: left;
   }
   :root.text-klein body { font-size: 0.875rem; }
   :root.text-gross body { font-size: 1.125rem; }
   :root.breite-breit body { max-width: none; }

   a:link { text-decoration: none; color: var(--link); }
   a:visited { text-decoration: none; color: var(--link-visited); }
   a:hover, a:focus { text-decoration: underline; }
   a.pp-toc-lock { color: var(--text-locked); }

   a.springen {
      position: fixed;
      top: -100em;
      left: 1em;
      z-index: 1;
      padding: 0.4em 1em;
      background-color: var(--bg-tint);
      border: 1px solid var(--border);
   }
   a.springen:focus { top: 0.5em; }

   header.site {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5em 1em;
      padding: 0.8em 0em;
      border-bottom: 1px solid var(--border);
   }
   header.site svg { display: block; }
   header.site p.langbar { margin: 0em; font-size: 0.925em; }

   div.page {
      display: grid;
      grid-template-columns: 13rem minmax(0, 62em) 13rem;
      justify-content: center;
      gap: 0em 3rem;
   }
   :root.breite-breit div.page { grid-template-columns: 13rem minmax(0, 1fr) 13rem; }

   nav.toc, aside.tools {
      box-sizing: border-box;
      position: sticky;
      top: 0em;
      align-self: start;
      max-height: 100vh;
      max-height: 100dvh;
      overflow-y: auto;
      padding: 1.5em 0em;
      font-size: 0.875em;
   }
   nav.toc div.kopf, aside.tools div.kopf {
      margin: 0em 0em 0.6em 0em;
      font-weight: bold;
   }
   nav.toc ul { margin: 0em; padding: 0em; list-style: none; }
   nav.toc li { margin: 0.4em 0em; }
   aside.tools fieldset { margin: 0em 0em 1.2em 0em; padding: 0em; border: 0em; }
   aside.tools legend { padding: 0em; margin-bottom: 0.3em; font-size: 0.925em; font-weight: bold; color: var(--text-muted); }
   aside.tools label { display: block; margin: 0em; padding: 0.3em 0em; }
   aside.tools label:has(input:checked) { font-weight: bold; }
   aside.tools input { margin-right: 0.4em; accent-color: var(--link); }

   main h1, main h2 {
      font-family: "Linux Libertine", Georgia, Times, serif;
      font-weight: normal;
      border-bottom: 1px solid var(--border);
      margin: 1em 0em 0.4em 0em;
      padding-bottom: 0.15em;
      line-height: 1.3;
   }
   main h1 { font-size: 2em; margin-top: 0.6em; }
   main h2 { font-size: 1.5em; }
   main h3 { font-size: 1.2em; margin: 1.2em 0em 0.4em 0em; line-height: 1.4; }
   main h1, main h2, main h3, main li { text-align: left; }

   figure.lead {
      float: right;
      clear: right;
      margin: 0.5em 0em 1em 1.5em;
      padding: 3px;
      max-width: 22em;
      border: 1px solid var(--border-light);
      background-color: var(--bg-tint);
   }
   /* Die Produktfotos sind freigestellt; die Seitenfarbe dahinter folgt dem
      hellen oder dunklen Thema, ein zweites Bild je Thema ist nicht noetig. */
   figure.lead img {
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid var(--border-light);
      background-color: var(--bg-page);
      box-sizing: border-box;
   }
   /* 3D-Ansicht unter dem Foto: feste Breite wie das Foto, damit die
      umflossene Abbildung nicht auf die Standardbreite des iframe schrumpft */
   figure.lead iframe {
      display: block;
      width: 22em;
      max-width: 100%;
      aspect-ratio: 11 / 8;
      border: 1px solid var(--border-light);
      background-color: var(--bg-page);
      box-sizing: border-box;
   }
   figure.lead figcaption {
      padding: 3px 2px 1px 2px;
      font-size: 0.925em;
      line-height: 1.4;
      color: var(--text-muted);
   }

   /* position:relative haelt das absolut gesetzte span.pp-hidden aus passport.js
      im Kasten; sonst scrollt die ganze Seite bei schmalen Fenstern (WCAG 1.4.10) */
   div.tabelle { position: relative; margin: 1em 0em; overflow-x: auto; }
   main table {
      border: 1px solid var(--border);
      border-spacing: 0em;
      border-collapse: collapse;
      background-color: var(--bg-tint);
   }
   main table th, main table td {
      border: 1px solid var(--border);
      padding: 0.2em 0.6em;
      vertical-align: top;
   }
   main table th { background-color: var(--bg-th); text-align: center; }
   main table td { text-align: left; }

   /* Zeilenkoepfe: semantisch th (WCAG H51), optisch wie td */
   main table th[scope="row"] {
      background-color: transparent;
      text-align: left;
      font-weight: normal;
   }

   /* Die Ausrichtung einer Spalte nach der Trennzeile der Tabelle */
   main table th.links, main table td.links { text-align: left; }
   main table th.rechts, main table td.rechts { text-align: right; }
   main table th.mitte, main table td.mitte { text-align: center; }

   /* overflow laesst die Hinweisbox neben dem gefloateten Bild enden */
   main blockquote {
      margin: 1em 0em;
      padding: 0.25em 1em;
      border: 1px solid var(--border);
      border-left: 10px solid var(--notice-bar);
      background-color: var(--bg-notice);
      overflow: hidden;
   }

   /* Die Abschnittsliste fuehrt die Buchstaben der Verordnung im Text */
   main ol.buchstaben { list-style: none; padding-left: 1.4em; }

   main hr { border: 0px; border-top: 1px solid var(--border); margin: 2em 0em; }

   /* Die hr der Quellen bleiben im DOM (Abschnittsende fuer passport.js) und
      werden neben der h2-Hairline nur ausgeblendet */
   main hr:has(+ h2) { display: none; }

   main code {
      padding: 1px 4px;
      border: 1px solid var(--border-faint);
      background-color: var(--bg-tint);
   }

   /* body im Selektor gewinnt gegen die spaeteren Stilregeln von passport.js */
   body .pp-status { background-color: var(--bg-tint); border-color: var(--border); }
   body .pp-form { border-color: var(--border); }

   footer.site {
      clear: both;
      margin-top: 2.5em;
      padding: 0.8em 0em 0em 0em;
      border-top: 1px solid var(--border);
      font-size: 0.925em;
      color: var(--text-muted);
   }
   footer.site p { margin: 0em; }

   /* Felder, die aus den Betriebsdaten fortgeschrieben werden */
   span.upd { color: var(--text-muted); font-size: 85%; }
}

@media screen and (max-width: 62.5em)
{
   /* Einspaltig; Inhaltsverzeichnis und Panel bleiben erreichbar (WCAG 1.4.10) */
   div.page { display: block; }
   nav.toc, aside.tools {
      position: static;
      max-height: none;
      overflow: visible;
      padding: 1em 0em;
   }
   nav.toc { border-bottom: 1px solid var(--border); }
   nav.toc ul { display: flex; flex-wrap: wrap; gap: 0.2em 1.4em; }
   nav.toc li { margin: 0em; }
   aside.tools { display: flex; flex-wrap: wrap; gap: 0em 2.5em; border-top: 1px solid var(--border); }
   aside.tools div.kopf { flex-basis: 100%; }
}

@media screen and (max-width: 45em)
{
   body { padding: 0em 1em 2em 1em; }
   figure.lead { float: none; margin: 1em auto; }
}

@media print
{
   html { background-color: #ffffff; }
   body { max-width: none; padding: 0em; }
   div.page { display: block; }
   nav.toc, aside.tools { display: none; }
   header.site p.langbar { display: none; }
   a:link, a:visited { text-decoration: underline; color: #0000ff; }
   figure.lead, main blockquote, main table tr { break-inside: avoid; }
   figure.lead:has(iframe) { display: none; }
   main h1, main h2, main h3 { break-after: avoid; }
}