:root {
  --db: #0ea5cb;
  --lb: #cef2fb;
  --dr: #f96818;
  --lr: #fbdece;
  --dy: #cfbf07;
  --ly: #fbf7ce;
  --dg: #29b816;
  --lg: #d3fbce;
  --gr: #bbb;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v15/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUXskPMA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, html {
  width : 100%;
  height : 100%;
  margin : 0;
  padding : 0;
  }

* {
  font-family : 'Space Grotesk', sans-serif;
  font-size : 100%;
}

.mobile {
  display : none;
}

address {
  margin : 2em 0 1em 0;
  font-size : 80%;
  color : var(--gr);
  font-style : normal;
}

#nfr {
  font-size : 50%;
  margin : 0;
  padding : 0;
}

img#logo {
  width : 100%;
}

div {
  padding-left : 0.5em;
}

ol {
  display: flex;
  flex-wrap: wrap;
  list-style-position: inside;
  list-style-type : none;
  margin : 0;
  padding : 0;
  position : relative;
}

li:not(.cat) {
  counter-increment: questionNumber;
  cursor : pointer;
}

li:not(.cat)::before {
  content: counters(questionNumber, ".", decimal-leading-zero) "\a0\a0";
  transition : 1s;
}


li {
  border-width : 1px;
  border-style : solid;
  padding : 0.75em;
  border-radius : 30px;
  margin : 0.7em 0.5em 0 0;
  transition : 1s;
}

li a {
  text-decoration : none;
  color : #000;
}

li.tools  {
  border-color : var(--db);
  background : var(--lb);
  }

li.tools::before {
  color : var(--db);
}

li.tools:hover {
  background : var(--db);
}

li.tools:hover::before {
  color : var(--lb);
}

li.schnuppern  {
  border-color : var(--dr);
  background : var(--lr);
  }

li.schnuppern::before {
  color : var(--dr);
}

li.schnuppern:hover {
  background : var(--dr);
}

li.schnuppern:hover::before {
  color : var(--lr);
}

li.dossier {
  border-color : var(--dy);
  background : var(--ly);
  }

li.dossier::before {
  color : var(--dy);
}

li.dossier:hover {
  background : var(--dy);
}

li.dossier:hover::before {
  color : var(--ly);
}

li.gespraech  {
  border-color : var(--dg);
  background : var(--lg);
  }

li.gespraech::before {
  color : var(--dg);
}

@media (hover) {
li.gespraech:hover {
  background : var(--dg);
}
}

li.gespraech:hover::before {
  color : var(--lg);
}

#dice {
  cursor : pointer;
  color : var(--dg);
}

#dice:hover {
  color : #fff;
}

.cat {
  list-style-type : none;
  list-style : none;
  counter-reset: questionNumber;
  text-decoration : none;
  border-width: 1px; 
  border-style: solid; 
  padding: 0.56em 1em; 
  border-radius : 30px; 
  margin : 0.5em 0.3em 0 0; 
  font-size : 120%;
}

li.tools_cat {
  background : var(--db); 
  color : var(--lb); 
  border-color: var(--db); 
}

li.schnuppern_cat {
  background : var(--dr); 
  color : var(--lr); 
  border-color: var(--dr); 
}

li.dossier_cat {
  background : var(--dy); 
  color : var(--ly); 
  border-color: var(--dy); 
}

li.gespraech_cat {
  background : var(--dg); 
  color : var(--lg); 
  border-color: var(--dg); 
}

.ext {
  background : url(../img/icon_ext.gif) 0em center no-repeat;
  padding-left : 1em;
}

.fil {
  background : url(../img/icon_fil.gif) 0em center no-repeat;
  padding-left : 1em;
}

header, footer, section {
  padding : 0 1em;
}

section {
  padding-bottom : 1em;
}

#frage {
  display : block;
  position : fixed;
  height : calc(100% - 2em);
  background : #795d40;
  color : #fff;
  padding : 1em;
  font-size : 150%;
  width : calc(25% - 2em);
  float : left;
  margin-left : calc(0px - 25% - 2em);
  transition : margin-left 3s, height 3s;
  }

#container {
  float : right;
  width : calc(100% - 2em);
  transition : width 3s;
}

p#button {
  text-align : right;
  margin : -0.25em 0 0 0.5em;
  font-size : 200%;
}

button {
  width : 1em;
  background : #795d40;
  color : #fff;
  border-width : 0;
  margin : -1em 0 0.5em 0;
  text-align : right;
  padding : 0;
  border-radius : 0;
  -webkit-appearance : none;
  -webkit-border-radius : 0;
  cursor : pointer;
}

#frage h1 {
  font-size : 100%;
  background: #fff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #795d40;
  display: inline;
  line-height: 1.8;
  padding: 0.2em 0.3em;
  font-weight : normal;
}

#mobile, #reload {
  display : none;
}

@media screen and (max-width: 1150px) {

#screen, #button, .cat, #reload2, .screen {
  display : none;
}

#mobile, #reload, .mobile {
  display : block;
}
	
.adr {
  padding : 4em 1em 1em 1em;
  font-size : 80%;
  color : var(--gr);
  }

#frage {
  margin : 0 0 0.5em 0;
  clear : both;
  width : calc(100% - 1em);
  height : auto;
  position : relative;
  height : 15em;
  padding : 1em 0.5em;
}

#container {
  width : 100%;
  margin : 0;
  padding : 0;
}

li {
  border-radius : 0;
  clear : both;
  width : calc(100% - 2.8em);
  text-indent: -2.3em;
  padding-left: 2.5em;
}
	
li:not(.cat)::before {
  padding-left : 0.5em;	
  }

input.tools ~ ol, input.schnuppern ~ ol, input.dossier ~ ol, input.gespraech ~ol {
  display : none;
}

.tools h1, .schnuppern h1, .dossier h1, .gespraech h1 {
  margin-bottom : 0;
}

input.tools:checked ~ ol, input.schnuppern:checked ~ ol, input.dossier:checked ~ ol, input.gespraech:checked ~ ol {
  display : block;
}

.tools:checked + label h1, .schnuppern:checked + label h1, .dossier:checked + label h1, .gespraech:checked + label h1 {
  margin-bottom : 0.67em;
}

.x {
  font-size : 120%;
  display : none;
  width : 1em;
  height : 1em;
  padding : 0;
  margin : 1em;
  position : absolute;
  top : 0;
  right : 0;
  cursor : pointer;
}

table {
  border-spacing : 0 1em;
  width : 100%;
}

td {
  font-size : 90%;
  width : 100%;
  vertical-align : top;
  padding : 1em;
  margin : 1em;
  border-color : #000;
  border-style : solid;
  border-width : 0px;
  color : #000;
}

td h1 {
  font-weight : normal;
  font-size : 150%;
  margin : 0;
}

.xtools, td.tools {
  color : var(--db);
  background : var(--lb);
}

.xschnuppern, td.schnuppern {
  color : var(--dr);
  background : var(--lr);
}

.xdossier, td.dossier {
  color : var(--dy);
  background : var(--ly);
}

.xgespraech, td.gespraech {
  color : var(--dg);
  background : var(--lg);
}

input[type=radio]  {
  display : none;
}

.ext {
  background : none;
  padding-left : 0;
}

.fil {
  background : none;
  padding-left : 0;
}

header {
  padding-top : 1em;
}

section {
  padding : 0;
}

#reload {
  position : absolute;
  top : 0.25em;
  right : 0.25em;
  text-align : right;
  margin : 0 0 0 0;
}

#reload button {
  font-size : 200%;
  margin-bottom : 0;
  -webkit-appearance : none;
  -webkit-border-radius : 0;
  text-align : right;
  margin : 0;
  padding : 0;
}

h1 {
  margin-right : 1.5em;
}
/*
li:not(.cat)::marker {
  content: counter(questionNumber, decimal-leading-zero) ' \a0';
}*/

}