@import url('/css/CenturySchL.css');
@import url('/Aufgaben/arbeitsblatt-mw.css');

:root {
  --loesung-display: none;
  --tick-font-size-pt: 9;
}

.toc, #toc { display: none; }

#firstHeading { line-height: normal;}

.paragraf {
  margin: 0.4em 0 0.5em 0;
}

.mw-heading2 {
  border-bottom: none;
  font-weight: bold;
}

.mw-body-content {
  line-height: 1.25 !important;
  max-width: 17cm;
}

.links {
  float: right;
  font-family: 'Courier New', Courier, monospace;
}

.grauezelle, .wellenlaengebruch {
  height: 1.5cm;
  width: 1.5cm;
  border: 1px solid rgb(190 190 190);
}

.grauezelle {
  background-color: lightgray;
}
.wellenlaengebruch {
  vertical-align: top;
}


#content {
  font-family: 'Century Schoolbook L';
  p, li {
    text-align: justify;
    hyphens: auto;
    margin: 0.4em 0 0.5em 0;
  }
}

.loesung {
  color: red;
  display: var(--loesung-display);
}

#bodyContent {
  counter-reset: aufgabe;
  counter-reset: paragraph;
}

.aufgabe {
  counter-reset: subaufgabe;
  counter-increment: aufgabe;
  font-weight: bold;
  & > *:first-child::before {
    content: "Aufgabe " counter(aufgabe) " ";
  }
}

.subaufgabe {
  --indent: 2em;
  counter-increment: subaufgabe;
  margin-left: var(--indent);
  position: relative;

  & > *:first-child::before {
      position: absolute;
      content: counter(subaufgabe, lower-alpha) ")";
      font-weight: bold;
      left: calc(var(--indent) * -1);
  }
}

.mensch {
  font-variant-caps: small-caps;
}

.liste {
  counter-reset: listcounter;
  --vor: attr(data-vor);
  --nach: attr(data-nach, ".");

  & > * {
      display: list-item;
      counter-increment: listcounter;
      margin-left: 2.5em !important;
  }

  &.listeohne { list-style-type: none; }
  &.listepunkt { list-style-type: disc; }
  &.listekreis { list-style-type: circle; }
  &.liste123 > *::marker { content: var(--vor) counter(listcounter, decimal)     var(--nach) " "; }
  &.listeabc > *::marker { content: var(--vor) counter(listcounter, lower-alpha) var(--nach) " "; }
  &.listeABC > *::marker { content: var(--vor) counter(listcounter, upper-alpha) var(--nach) " "; }
  &.listeIVX > *::marker { content: var(--vor) counter(listcounter, upper-roman) var(--nach) " "; }
  &.listeivx > *::marker { content: var(--vor) counter(listcounter, lower-roman) var(--nach) " "; }

}

.ab-ausklappen {
  display: grid;
  width: 100%;
  gap: 4px;
  align-items: baseline;
  justify-items: start;
  grid-template-columns: min(2%, 1.5em) 1fr;
  grid-template-areas:
    "title title"
    "seite content" ;
  > .ab-title   {
    grid-area: title;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5ex;
    font-size: 15px;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    border-radius: 3px;
    &:hover {
      background-color: rgb(236, 236, 236);
    }
  }
  > .ab-toggle  { grid-area: toggle; color:#dc6f50; }
  > .ab-content { grid-area: content; display: none; width: 100%; }
  > .ab-seite { grid-area: seite; display: none; width: 100%; height: 100%; margin-left: -2px; }
  > .ab-title .ausklappenClick {
    user-select: none;
  }
  > .ab-title .ausklappenClick::before {
      content: '▶';
      display: inline-block;
      color:#dc6f50;
      margin-right: 1ex;
    }
  &[aria-expanded=true] {
    > .ab-seite, > .ab-content { display: block; }
    > .ab-title .ausklappenClick::before { transform: rotate(90deg); }
  }
}

.ab-seite:hover {
  border-right: 2px solid rgb(134, 134, 134);
}

.ausklappenClick { cursor: pointer; }

.ab-schnipsel-scroll {
  overflow: auto;
  max-height: 600px;
  padding: 3px;
  margin-bottom: 6px;
  border-radius: 5px;
  border: 2px solid lightgrey;
  &:hover {
    border-color: rgb(165, 224, 110);
  }
}

.ab-schnipsel-content {
  a { cursor: copy;}
  padding: 3px;
  cursor: copy;
}

table { border-collapse: collapse; td,th { padding: 1px 5px; }}
table[data-padding] {
  --padding-value: attr(data-padding px);
  > * > tr > * { padding: var(--padding-value);}
}

table {
  --border-color: #aaa;
}
table.vertical-align-top > * > tr > * {vertical-align: top;}
table.allborders > * > tr > td { border: 1px solid var(--border-color); }
table.border-first > * > tr:first-child > * { border-bottom: 1px solid var(--border-color); }
table.border-first > * > tr > *:first-child { border-right: 1px solid var(--border-color); }

table[data-center-cols~="1"]  > * > tr > *:nth-child( 1) { text-align: center; }
table[data-center-cols~="2"]  > * > tr > *:nth-child( 2) { text-align: center; }
table[data-center-cols~="3"]  > * > tr > *:nth-child( 3) { text-align: center; }
table[data-center-cols~="4"]  > * > tr > *:nth-child( 4) { text-align: center; }
table[data-center-cols~="5"]  > * > tr > *:nth-child( 5) { text-align: center; }
table[data-center-cols~="6"]  > * > tr > *:nth-child( 6) { text-align: center; }
table[data-center-cols~="7"]  > * > tr > *:nth-child( 7) { text-align: center; }
table[data-center-cols~="8"]  > * > tr > *:nth-child( 8) { text-align: center; }
table[data-center-cols~="9"]  > * > tr > *:nth-child( 9) { text-align: center; }
table[data-center-cols~="10"] > * > tr > *:nth-child(10) { text-align: center; }

table[data-left-cols~="1"]  > * > tr > *:nth-child( 1) { text-align: left; }
table[data-left-cols~="2"]  > * > tr > *:nth-child( 2) { text-align: left; }
table[data-left-cols~="3"]  > * > tr > *:nth-child( 3) { text-align: left; }
table[data-left-cols~="4"]  > * > tr > *:nth-child( 4) { text-align: left; }
table[data-left-cols~="5"]  > * > tr > *:nth-child( 5) { text-align: left; }
table[data-left-cols~="6"]  > * > tr > *:nth-child( 6) { text-align: left; }
table[data-left-cols~="7"]  > * > tr > *:nth-child( 7) { text-align: left; }
table[data-left-cols~="8"]  > * > tr > *:nth-child( 8) { text-align: left; }
table[data-left-cols~="9"]  > * > tr > *:nth-child( 9) { text-align: left; }
table[data-left-cols~="10"] > * > tr > *:nth-child(10) { text-align: left; }

table[data-right-cols~="1"]  > * > tr > *:nth-child( 1) { text-align: right; }
table[data-right-cols~="2"]  > * > tr > *:nth-child( 2) { text-align: right; }
table[data-right-cols~="3"]  > * > tr > *:nth-child( 3) { text-align: right; }
table[data-right-cols~="4"]  > * > tr > *:nth-child( 4) { text-align: right; }
table[data-right-cols~="5"]  > * > tr > *:nth-child( 5) { text-align: right; }
table[data-right-cols~="6"]  > * > tr > *:nth-child( 6) { text-align: right; }
table[data-right-cols~="7"]  > * > tr > *:nth-child( 7) { text-align: right; }
table[data-right-cols~="8"]  > * > tr > *:nth-child( 8) { text-align: right; }
table[data-right-cols~="9"]  > * > tr > *:nth-child( 9) { text-align: right; }
table[data-right-cols~="10"] > * > tr > *:nth-child(10) { text-align: right; }

table[data-border-left-cols~="1"]  > * > tr > *:nth-child( 1) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="2"]  > * > tr > *:nth-child( 2) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="3"]  > * > tr > *:nth-child( 3) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="4"]  > * > tr > *:nth-child( 4) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="5"]  > * > tr > *:nth-child( 5) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="6"]  > * > tr > *:nth-child( 6) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="7"]  > * > tr > *:nth-child( 7) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="8"]  > * > tr > *:nth-child( 8) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="9"]  > * > tr > *:nth-child( 9) { border-left: 1px solid var(--border-color); }
table[data-border-left-cols~="10"] > * > tr > *:nth-child(10) { border-left: 1px solid var(--border-color); }

table[data-border-right-cols~="1"]  > * > tr > *:nth-child( 1) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="2"]  > * > tr > *:nth-child( 2) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="3"]  > * > tr > *:nth-child( 3) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="4"]  > * > tr > *:nth-child( 4) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="5"]  > * > tr > *:nth-child( 5) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="6"]  > * > tr > *:nth-child( 6) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="7"]  > * > tr > *:nth-child( 7) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="8"]  > * > tr > *:nth-child( 8) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="9"]  > * > tr > *:nth-child( 9) { border-right: 1px solid var(--border-color); }
table[data-border-right-cols~="10"] > * > tr > *:nth-child(10) { border-right: 1px solid var(--border-color); }

table[data-border-bottom-rows~="1"]  > * > tr:nth-child( 1) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="2"]  > * > tr:nth-child( 2) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="3"]  > * > tr:nth-child( 3) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="4"]  > * > tr:nth-child( 4) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="5"]  > * > tr:nth-child( 5) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="6"]  > * > tr:nth-child( 6) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="7"]  > * > tr:nth-child( 7) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="8"]  > * > tr:nth-child( 8) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="9"]  > * > tr:nth-child( 9) > * { border-bottom: 1px solid var(--border-color); }
table[data-border-bottom-rows~="10"] > * > tr:nth-child(10) > * { border-bottom: 1px solid var(--border-color); }

table[data-border-top-rows~="1"]  > * > tr:nth-child( 1) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="2"]  > * > tr:nth-child( 2) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="3"]  > * > tr:nth-child( 3) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="4"]  > * > tr:nth-child( 4) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="5"]  > * > tr:nth-child( 5) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="6"]  > * > tr:nth-child( 6) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="7"]  > * > tr:nth-child( 7) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="8"]  > * > tr:nth-child( 8) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="9"]  > * > tr:nth-child( 9) > * { border-top: 1px solid var(--border-color); }
table[data-border-top-rows~="10"] > * > tr:nth-child(10) > * { border-top: 1px solid var(--border-color); }

.paragraph {
  display: inline-block;
  width: 2.5em;
  font-style: italic;
  counter-increment: paragraph;
  &::before { content: "§ " counter(paragraph) "."; }
}

.collapse {
  --display: none;
  cursor: pointer;
  .collapsible-content { display: var(--display); }
}

img {
  max-width: 95%;
  height: auto;
}

#schwebendapp {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
}

xy-graphs > span {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

.centering { margin: auto; }
.fett { font-weight: bold;}
.kursiv {font-style: italic;}

@media print {
  @page {
      margin-top: calc(1.2cm + 55px);
      margin-bottom: 2cm;
      margin-left: 2cm;
      margin-right: 2cm;
      @bottom-right {
          font-family: 'Noto Sans';
          font-size: small;
          content: "Seite " counter(page) " von " counter(pages);
      }
      @top-right {
          font-family: 'Noto Sans';
          font-size: small;
          vertical-align: bottom;
          margin-bottom: 2mm;
      }
      @top-left {
          content: url("/Aufgaben/liselogo.svg");
          vertical-align: bottom;
          margin-bottom: 2mm;
      }
  }

  .noprint,
  #siteSub,
  #toc,
  #footer,
  .printfooter,
  #catlinks,
  #firstHeading,
  #schwebendapp { display:none; }

  body {
    font-size: 10pt;
  }

  h1, h2, h3, h4, h5, h6, .aufgabe {
    break-before: auto;
    break-after: avoid;
  }
}