/* Font Nunito, von https://gwfh.mranftl.com/fonts/nunito?subsets=latin */
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-v32-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito-v32-latin-700.woff2') format('woff2');
}

/* Grundwerte für Farben, Schriften, Abstände und Seitengröße */
:root {
  color-scheme: light dark;

  /* Farben */
  --color-background: light-dark(#fff, #18232b);
  --color-text: light-dark(#18232b, #d8e5ec);
  --color-muted: light-dark(#52616b, #a9bac4);
  --color-border: light-dark(#ccd6dc, #526773);
  --color-soft: light-dark(#f3f7f8, #24343d);
  --color-code: light-dark(#eef4f6, #202f37);
  --color-accent: light-dark(#287a9c, #74c5e8);
  --color-accent-dark: light-dark(#185d78, #9bd7ef);
  --color-note: light-dark(#eef7ea, #233524);
  --color-note-border: light-dark(#8ab17d, #7fb276);
  --color-note-text: light-dark(#263b20, #cfe8ca);
  --color-term: light-dark(#18752c, #7ed58d);
  --color-table-heading: light-dark(#31444f, #d8e5ec);
  --color-diagram-text: #18232b;
  --color-demo: light-dark(#f4b942, #e8b84f);
  --color-demo-highlight: light-dark(#ff8181, #ff6666);
  --color-warning: light-dark(#a5252b, #ff9aa0);
  --svg-line: light-dark(#28789a, #74c5e8);

  /* Schriften */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --base-font-size: 100%;

  /* Maße */
  --space-1: 0.2rem;
  --space-2: 0.35rem;
  --space-3: 0.5rem;
  --space-4: 0.7rem;
  --space-6: 1.4rem;
  --sheet-max-width: 74rem;
  --sheet-min-height: 297mm;
  --header-image-size: 8em;
  --header-image-print-size: 5em;
  --footer-qr-size: 8rem;
  --footer-qr-print-size: 5rem;

  --radius-small: 0.25rem;
  --radius: 0.5rem;
}

/* Einheitliches Boxmodell für alle Elemente */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Grundtypografie */
html {
  min-width: 20rem;
  background: var(--color-background);
  font-family: var(--font-sans);
  font-size: var(--base-font-size);
  line-height: 1.4;
  color: var(--color-text);
  text-size-adjust: 100%;
}
h1,
h2,
h3 {
  font-family: Nunito, sans-serif;
}

body {
  margin: 0;
}

/* Dokumentfläche für kleine Bildschirme */
main {
  min-height: 100vh;
  margin-inline: auto;
  padding: clamp(0.7rem, 3vw, 1.4rem);
}

.checklist-title {
  color: var(--color-term);
}

.pitfalls-title {
  color: var(--color-warning);
}

/* Links in der SELFHTML-Akzentfarbe */
a {
  color: var(--color-accent);
}

/* Inline-Code und mehrzeilige Codebeispiele */
code,
pre {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

:not(pre) > code {
  border-radius: var(--radius-small);
  background: var(--color-code);
  overflow-wrap: anywhere;
}

pre,
pre[class*="language-"] {
  overflow-x: auto;
  margin-block-start: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre[class*="language-"] > code[class*="language-"] {
  font: inherit;
  white-space: inherit;
}

/* Kopfbereich mit Logo, Titel und Einführung */
main > header,
.print-page > header {
  display: grid;
  grid-template-columns: 1fr var(--header-image-size);
  column-gap: var(--space-4);
  margin-block-end: var(--space-6);
}

main > header > img,
.print-page > header > img {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  width: var(--header-image-size);
}

main > header h1,
.print-page > header h1 {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

main > header h1 a,
.print-page > header h1 a {
  display: block;
  width: 1em;
  aspect-ratio: 1;
}

main > header h1 img,
.print-page > header h1 img {
  display: block;
  width: 100%;
}

.print-hint {
  margin-block-start: var(--space-2);
  color: var(--color-warning);
}

/* Inhaltliche Abschnitte */
main > section,
.print-page > section {
  margin-block-end: var(--space-6);
}

/* Auf kleinen Bildschirmen stehen alle Inhalte untereinander. */
.grid,
.grid-3,
.definition {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

.grid-3 {
  align-items: stretch;
}

.grid > *,
.grid-3 > * {
  min-width: 0;
}

.editor-note {
  display: grid;
  gap: var(--space-2);
}

.editor-note > * {
  margin-block: 0;
}

.flow-options {
  margin-block-start: var(--space-4);
}

/* Allgemeine Inhaltskarte */
.box {
  min-width: 0;
}

/* Hervorgehobener Hinweis */
.note {
  background: var(--color-note);
  color: var(--color-note-text);
}

/* Begriff und Erklärung in zwei Spalten */
.definition {
  gap: var(--space-1);
  margin-block-end: 0;
}

.definition dt {
  color: var(--color-term);
  font-weight: bold;
}

.definition dd {
  margin: 0;
}

.definition dd + dt {
  margin-block-start: var(--space-2);
}

/* Tabellen */
table {
  width: 100%;
  border: thin solid var(--color-border);
  border-collapse: collapse;
  border-radius: var(--radius);
  font-size: 0.9rem;
}

th,
td {
  padding: var(--space-2);
  border-block-end: thin solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

th {
  background: var(--color-soft);
  color: var(--color-table-heading);
  font-weight: bold;
}

.note-after {
  margin-block-start: var(--space-4);
  margin-block-end: 0;
}

tbody tr:last-child td {
  border-block-end: 0;
}

/* Kompakte Aufzählungen */
.compact-list {
  margin-block-end: 0;
  padding-inline-start: 1.3rem;
}

.compact-list li + li {
  margin-block-start: var(--space-2);
}

/* Responsive eingebundene Grafiken */
.demo-svg {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}

/* Hervorhebungen in Eigenschaftstabellen */
.prop-table td:first-child {
  color: var(--color-term);
  font-weight: bold;
}

.prop-table {
  min-width: 0;
  table-layout: fixed;
}

/* Unsichtbarer Vorrat für wiederverwendbare SVG-Definitionen */
.svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Quellen- und Lizenzangaben */
.source-footer {
  line-height: 2;
  color: var(--color-muted);
}

.source-footer__text {
  display: grid;
  gap: var(--space-1);
}

.source-footer__qr {
  margin-block-start: -0.5rem;
  line-height: 0;
}

.source-footer__qr svg {
  display: block;
  width: var(--footer-qr-size);
}

.qr-code-lines {
  stroke: var(--color-accent);
}

/* Rahmen und Innenabstände sind nur am Bildschirm nötig. */
@media screen {
  pre,
  pre[class*="language-"] {
    padding: var(--space-4);
    border: thin solid var(--color-border);
    border-radius: var(--radius);
  }

  .box {
    padding: var(--space-4);
    border: thin solid var(--color-border);
    border-radius: var(--radius);
  }

  .box > * {
    margin-block: 0.3rem;
  }

  .note {
    padding: var(--space-3) var(--space-4);
    border: thin solid color-mix(in srgb, var(--color-note-border), transparent 45%);
    border-inline-start: var(--space-1) solid var(--color-note-border);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
  }

  /* Seitentitel-Größe dynamisch */
  h1 {
    font-size: clamp(2em, 5cqw, 3em);
  }
}

/* Ab mittleren Breiten werden Inhalte zweispaltig. */
@media (width > 45em) {
  .grid,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .definition {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
  }

  .definition dd + dt {
    margin-block-start: 0;
  }

  .source-footer {
    display: flex;
    gap: var(--space-3);
    align-items: start;
    justify-content: space-between;
  }
}

/* Auf großen Bildschirmen erhält der Spickzettel seine volle Breite. */
@media screen and (width > 52em) {
  main {
    width: min(100%, var(--sheet-max-width));
    min-height: var(--sheet-min-height);
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Papierformat und Druckränder */
@page {
  size: A4 portrait;
  margin: 11mm 13mm 15mm;
}

/* Nur die für den Druck notwendigen Abweichungen */
@media print {
  html {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  :root {
    color-scheme: light;
    --base-font-size: 9pt;
    --space-2: 0.05rem;
    --space-4: 0.5rem;
    --space-6: 0.2rem;
    --print-content-height: calc(297mm - 11mm - 15mm);
    --print-page-height: calc(var(--print-content-height) - 2mm);
  }
  
  body {
    padding: .1rem;
  }
  
  main > header > img,
  .print-page > header > img {
    margin-block-start: 1em;
    width: var(--header-image-print-size);
  }

  code,
  :not(pre) > code {
    background: transparent;
    padding: 0;
  }

  pre,
  pre[class*="language-"] {
    margin-block: var(--space-2);
    overflow: visible;
    background: transparent;
    line-height: 1.3;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  pre[class*="language-"] > code[class*="language-"] {
    background: transparent;
  }

  .no-print {
    display: none;
  }

  .note {
    background: transparent;
    color: #18752c;
  }

  main {
    display: flex;
    flex-direction: column;
    min-block-size: var(--print-content-height);
    padding: 0;
  }

  main > footer {
    margin-block-start: auto;
  }

  main:has(> .print-page) {
    display: block;
    min-block-size: 0;
  }

  .print-page {
    display: flex;
    flex-direction: column;
    min-block-size: var(--print-page-height);
  }

  .print-page > footer {
    margin-block-start: auto;
  }

  /* Im Druck werden Browserabstände gezielt verdichtet. */
  :where(h1, h2, h3, p, figure, pre, table, dl, ul) {
    margin-block: var(--space-2);
  }

  :where(h1, h2, h3) {
    line-height: 1.15;
    text-wrap: balance;
  }

  h2 {
    margin-block-end: var(--space-3);
  }

  main > header,
  main > section,
  .print-page > header,
  .print-page > section {
    margin-block-end: var(--space-3);
  }

  .note-after,
  .flow-options {
    margin-block-start: var(--space-2);
  }

  /* Tabellen im Druck etwas kompakter darstellen. */
  th,
  td {
    padding: var(--space-1) var(--space-2);
  }

  /* Überschriften nicht vom folgenden Inhalt trennen. */
  h1,
  h2,
  h3,
  caption,
  figcaption {
    break-after: avoid-page;
  }

  /* Kleine zusammengehörige Blöcke nicht auf zwei Seiten verteilen. */
  pre,
  blockquote,
  figure,
  img,
  svg,
  .box,
  .note {
    break-inside: avoid-page;
  }

  /* Tabellenköpfe auf Folgeseiten wiederholen. */
  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid-page;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* QR Code kleiner */
  .source-footer__qr svg {
    width: var(--footer-qr-print-size);
  }

  .print-page {
    break-after: page;
  }

  .print-page:last-child {
    break-after: auto;
  }

}