@charset "UTF-8";

:root, [data-theme="dark"] {
  --color-bg:            #000000;
  --color-surface:       #3e2a1c;
  --color-text:          #ffffff;
  --color-text-inv:      #000000;
  --color-text-muted:    #5a5a5a;
  --color-primary:       #d2162f;
  --color-secondary:     #f0a032;
  --color-accent:        #c55e1b;
  --color-border:        #5a5a5a;
  --color-link:          #6c2721;
  --color-link-hover:    #c55e1b; }

[data-theme="light"] {
  --color-bg:            #ffffff;
  --color-surface:       #3e2a1c;
  --color-text:          #000000;
  --color-text-inv:      #ffffff;
  --color-text-muted:    #5a5a5a;
  --color-primary:       #d2162f;
  --color-secondary:     #c55e1b;
  --color-accent:        #6c2721;
  --color-border:        #5a5a5a;
  --color-link:          #6c2721;
  --color-link-hover:    #c55e1b; }

.class_green {
  background: green; }

.class_yellow {
  background: yellow;
  color: black;}

.class_red {
  background: red; }

.class_grey {
  background: grey; }

.class_white {
  background: white; }

* {
  box-sizing: border-box;
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }

html {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 1.35;
}

body {
  background-color: var(--color-bg); 
  width: 100%;
  gap: 6px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "g_header" "g_main" "g_footer";
  align-content: stretch;
  justify-content: stretch;
}

h1, h2, h3 {
  text-align: left;
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 2px;
  margin-left: 4px;
  padding: 0; }

h1 {
    font-size: 24px;
    color: var(--color-secondary); }

h2 {
    font-size: 16px;
    color: var(--color-secondary); }

h3, th {
    font-size: 14px;
    color: var(--color-accent); }

i {
    color: var(--color-secondary);
}

a, p, option, td, li, ol, ul, label, pre, code {
  text-align: left;
  font-size: 12px;
  margin-top: 0;
  margin-right: 4px;
  margin-bottom: 4px;
  margin-left: 4px;
  color: var(--color-text); }

code {
  font-family: monospace;
  background: #080808;
  color: #ffffff;
  padding: 2px;
  overflow-x: auto;
}


a:hover {
    color: var(--color-link-hover); }

ol, ul {
  margin: 0;
  padding-left: 1.25rem; }

label {
  text-align: right; }

pre {
  font-size: 14px; }

table {
    width: 100%;
    background-color: var(--color-bg); }

tr {
  background-color: grey; }

img {
  float: left;

  border-radius: 10%;
  shape-outside: circle(42%);
  shape-margin: 1.75rem;
 }

   summary > h2,
  summary > h3,
  summary > h4 {
    margin: 0;
    display: inline;
  }

  /* optional: etwas Luft, aber kontrolliert */
  summary {
    padding: 0.25rem 0;
    cursor: pointer;
  }