@import url("css/style-artikel.css");
@import url("css/style-buttons.css");
@import url("css/style-dialog.css");
@import url("css/style-figure.css");
@import url("css/style-heading.css");
@import url("css/style-input.css");
@import url("css/style-lists.css");
@import url("css/style-footer.css");
@import url("css/style-select-option.css");
@import url("css/style-table.css");

@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;src:url("schriften/FiraMono-Medium.ttf") format('truetype');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300;font-display:swap;src:url("schriften/Quicksand-Light.ttf") format('truetype');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url("schriften/Quicksand-Bold.ttf") format('truetype');}
@font-face{font-family:'Montserrat';src:url("schriften/montserrat-black.ttf") format('truetype');font-display:swap;font-weight:900;}
@font-face{font-family:'Montserrat';src:url("schriften/Montserrat-ExtraBold.ttf") format('truetype');font-display:swap;font-weight:800;}
@font-face{font-family:'Poppins';src:url("schriften/Poppins-SemiBold.ttf") format('truetype');font-display:swap;font-weight:600;}
@font-face{font-family:'Poppins';src:url("schriften/Poppins-SemiBold.ttf") format('truetype');font-display:swap;font-style:italic;font-weight:600;}
@font-face {font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url("schriften/Quicksand-Medium.ttf") format('truetype');}

body{
  --font-def:"Quicksand",sans-serif;
  --font-str:"Poppins",sans-serif;
  --font-mon:"Fira Mono",monospace;
  --col-pri:#ff8d2e;
  --col-pri-l1:#ffaf73;
  --col-bg:#fff5ed;
  --col-bg-s1:#fffdfb;
  --col-bg-s2:#fff;
  --col-bg-s3:#f7c9a3;
  --col-txt:#000;
  --col-txt-l:rgb(46, 46, 46);
  --col-err:#FF6969;  
  --col-cor:#a6cc59;
  --col-blue:#65d6ff;
  --col-on-pri:#20140b;
  --col-on-pri-l1:#20140b;
  --col-on-bg-s3:#040404;
  --col-bor:#916c4d;
  --col-bor-l:#c8c8c8;
  --col-d-bg:#121212;
  --col-d-bg-s1:#1a1a1a;
  --col-d-bg-s2:#2f2f2f;
  --col-d-bg-s3:#404040;
  --col-d-txt:#d7d7d7;
  --col-d-txt-l:rgb(128, 128, 128);
  --col-d-pri:#fa8f37;
  --col-d-pri-l1:#d59f76;
  --col-d-on-bg-s3:#fff;
  --col-d-bor-l:#393939;
  --filter-ci-img:none;
  --time-trans:200ms;
  --border-radius:0.2rem;
  --border-radius-s:0.1rem;
  --border-radius-l:10px;
  --box-shadow:0 0 .3rem #20140b22,0 .6rem .5rem #20140b22;
  --border-radius-active-l:1rem var(--border-radius);/*button click */
  --border-radius-active-s:.6rem var(--border-radius);/* check big click*/  
  --farbe-rot:var(--col-err);--farbe-gruen:var(--col-cor);--farbe-dunkel:var(--col-on-pri);--farbe-orange:var(--col-pri);--farbe-blau:var(--col-pri);--farbe-orange-heller:var(--col-pri-l1);--farbe-hintergrund:var(--col-bg);--farbe-text:var(--col-txt);--farbe-hintergrund-hervorgehoben:var(--col-bg-s2);--farbe-border:var(--col-bor);--zeit-transition:var(--time-trans);
  background-color:var(--farbe-hintergrund);
  font-family:var(--font-def);
  font-weight:300;
  margin:70px 40px 0 40px;
  color:var(--farbe-text);
  margin-top:5rem;
}
/* darkmode */
body[data-design-mode="dark"]{
  --col-bg:var(--col-d-bg);
  --col-bg-s1:var(--col-d-bg-s1);
  --col-bg-s2:var(--col-d-bg-s2);
  --col-bg-s3:var(--col-d-bg-s3);
  --col-on-bg-s3:var(--col-d-on-bg-s3);
  --col-txt:var(--col-d-txt);
  --col-txt-l:var(--col-d-txt-l);
  --col-pri:var(--col-d-pri);
  --col-pri-l1:var(--col-d-pri-l1);
  --col-bor-l:var(--col-d-bor-l);
  --box-shadow:none;
  --filter-ci-img:saturate(.9);
}
::selection{
  background-color:var(--col-bg-s3);
  color:var(--col-on-bg-s3);
}
*{
  font-size:24px;
  font-weight:300;
  text-decoration:none;
  letter-spacing:0.001rem;
  word-spacing:0.005rem;
  transition:200ms;
  box-sizing: border-box;
}
input{
  font-family:"Quicksand";
}
div.container-not-full-width{
  margin:1rem calc((50% - 350px) + 1rem);
  padding:0;
}
@media (max-width:800px){
  div.container-not-full-width{
    margin:1rem .3rem;
  }
}
/* ---  -------------------------------------------------------------------*/
b{
  font-weight:700;
}
em{
  font:inherit;
  font-style:normal;
}
em::before{content:"»";}
em::after{content:"«";}
i{
  font:inherit;
  font-style:italic;
}
sub,sup{
  font-size:.5rem;
}
abbr{
  font:inherit;
  text-decoration:none;
  border-bottom:0.07rem dotted var(--col-txt);
  cursor:help;
}
abbr::selection{
  border-bottom:none;
}
strong{
  color:inherit;
  font-weight:600;
  font-size:inherit;
}
code{
  font-family:var(--font-mon);
  border-radius:var(--border-radius);
  display:inline;
  font-size:0.7rem;
  box-decoration-break:clone;
  hyphens:none;
}
code>*{
  font: inherit;
  color: inherit;
}
code>jknbkw, code>jknbnum{color:var(--col-err)}
code>jknbvar{color:var(--col-blue)}
code>jknbmod{color:var(--col-cor)}
code>jknbop, code>jknbp{color:var(--col-txt)}
code>jknbstr{color:var(--col-cor)}
code.block{
  display: block;
  background-color: var(--col-bg-s1);
  width: 100%;
  padding:1rem .5rem;
  margin: 1.5rem 0;
}
span{
  font:inherit;
}
kbd{
  font-family:var(--font-mon);
  font-size:0.6rem;
  text-transform:uppercase;
  padding:0.05rem 0.3rem;
  color:var(--col-bg);
  background-color:var(--col-pri-l1);
  cursor:context-menu;
  border-radius:var(--border-radius);
}
p,li{
  color :var(--col-txt);
  text-transform:none;
  font-size:0.85rem;
  font-weight:300;
  text-decoration:none;
  cursor:text;
  line-height:1.375rem;
  word-spacing:0.005rem;
  hyphens:auto;
}
p.txt-light{
  color: var(--col-txt-l);
  font-size: .65rem;
  line-height: 1rem;
}
p.quelle{
  color:var(--farb-text-verborgen);
  font-size:0.5rem;
  font-weight:300;
}
p.quelle a{all:inherit;display:inline-block;cursor:pointer;clear:both;}
p.quelle a:hover{text-decoration:underline;}
p.formula{/*für Formeln*/
  text-align:center;
  font-weight:700;
}
/*---FIELDSET & DETAILS---*/
.tool, .fieldset, details{
  display:block;
  /* box-shadow:var(--box-shadow); */
  background:var(--col-bg-s1);
  padding:1rem;
  border:1px solid var(--col-bg-s2);
  border-radius:var(--border-radius-l);
  margin:2rem 0;
  overflow:hidden;
  position:relative;/*summary::after*/
}
:is(.tool, .fieldset, details, dialog) :is(button, a.button){
  width:100%;
  box-sizing:border-box;
}
:is(.tool, .fieldset, details)>:is(h1,legend,summary){
  display:block;
  width:100%;
  letter-spacing:.3px;
  font-family:var(--font-str);
  font-weight:600;
  text-align:center;
  margin-top:.3rem;
  margin-bottom:2rem;
  padding:0rem;
  font-size:1rem;
}
:is(.tool, .fieldset)>:is(div.ergebnis, div.ergebnis-multiple){
  display:block;
  margin:1rem auto 3rem auto;
}
:is(.tool, .fieldset) div.ergebnis{
  color:var(--farbe-dunkel);
  font-weight:700;
  width:fit-content;
  padding:0.3rem 1rem;
  border-radius:var(--border-radius);
  background-color:var(--farbe-orange-heller);
  font-size:.8rem;
  word-break:break-all;
}
:is(.tool, .fieldset) div.ergebnis:empty{
  visibility: hidden;
}
:is(.tool, .fieldset)>div.ergebnis-multiple{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
}
:is(.tool, .fieldset) div.ergebnis span{
  font:inherit;
}
:is(.tool, .fieldset) div.ergebnis.ergebnis2{
  margin-top:-2rem;
}

:is(.tool, .fieldset) div.ergebnis::selection{
  background-color: var(--col-bg-s3);
  color: var(--col-txt);
}
:is(.tool, .fieldset) div.ergebnis :is(br,span.heading){
  display:none;
}
:is(.tool, .fieldset) div.ergebnis.big{
  break-after: always;
  font-size: 1.5rem;
}

details:not([open])>summary{
  margin-bottom:0 !important;
}
details>summary::before{
  content:"v";
  display:block;
  color:var(--farbe-text);
  font-size:.7rem;
  font-family:"Quicksand";
  font-weight:300;
  text-align:center;
  height:1rem;
  transform:translateY(-.45rem) rotate(0);
  transition:var(--zeit-transition);
}
details[open]>summary::before{
  transform:translateY(-.45rem) rotate(180deg);
}
:where(p,li,p>em,p>strong,li>em,li>strong,h1,h2,h3)>a:not([class]){
  color:inherit;
  font:inherit;
  border-bottom:1px solid var(--col-pri);
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 0rem transparent inset;
  transition:var(--zeit-transition);
}
:where(p,li,p>em,p>strong,li>em,li>strong,h1,h2,h3)>a:not([class]):hover,body[data-design-mode="dark"] :where(p,li,p>em,p>strong,li>em,li>strong,h1,h2,h3)>a:not([class]):hover{
  box-shadow: 0 -.4rem var(--col-pri) inset;
}
a:not([class]):not(:active):focus{
  background-color:var(--farbe-orange);
  color:var(--farbe-dunkel);
  outline:none;
  border:inherit;
}

fieldset{
  border: 1px solid var(--col-bor-l);
  margin-bottom: 1.5rem;
  border-radius:var(--border-radius-s)
}
fieldset>legend{
  font-size: .8rem;
  color: var(--col-txt-l);
}

/*---IMAGE-------------------------------------------------------------------*/
img{
  height:auto;
  width:100%;
  margin:0px;
}

/*--SCROLLBAR----------------------------------------------------------------*/
html{
  overflow-y:scroll;
  scrollbar-color:#f68222;
  scrollbar-width:thin;
  scroll-behavior:smooth;
}
::-webkit-scrollbar{
  width:0.5vw;
  height:0.5vw;
  border-left:1px solid var(--farbe-hintergrund);
}
::-webkit-scrollbar-corner{
  background-color:transparent;
}
::-webkit-scrollbar-button {
  display:none; 
}
::-webkit-scrollbar-track {
  background-color:var(--farbe-hintergrund);
}
::-webkit-scrollbar-thumb {
  background-color:var(--farbe-hintergrund-hervorgehoben);
  transition:250ms;
}
::-webkit-scrollbar-thumb:hover {
  background-color:var(--farbe-orange);
}

/* definition list */
dl>div{
  margin: 0 0 .5rem 0;
}
dl dt{
  font-size:.5rem;
  width:100%;
}
dl dd{
  width: 100%;
  font-family: var(--font-str);
  font-size:.7rem;
  margin:0;
}

dl>div.dl-main>dd{
  font-size:1.1rem;
  border-bottom:1px solid var(--farbe-border);
  padding-bottom:.2rem;
  margin-bottom:1rem
}

 
/* nav#menu{
  background-color: var(--col-bg-s3);
  width:100%;
  height:.9rem;
}
nav#menu>ul{
  width:100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
nav#menu>ul>li{
  list-style-type: none;
  display: inline-block;
  color:var(--col-txt)
} */
header{
  z-index: 10;
  height: 80px;
  width: auto;
  position: sticky;
  overflow: visible;
  margin-bottom:2rem;
}
@media print{
  header{display:none}
}
header>*{
  position:absolute;
  top:0;
  padding:0;
  margin: 0;
}
img.jknblogo{
  all:unset;
  height: 50px;
  width:auto;
  transition: 0.3s;
  filter: var(--filter-ci-img);
}
img.jknblogo#jknb_logo_small:hover{border-radius: var(--border-radius);}
img.jknblogo#jknb_logo_small:active{border-radius: var(--border-radius-active-s);}          

nav#menue-buttons{
  right:0;
  height:.8rem;
  width:.8rem;
}
button#menuebutton{
  all:unset;
  height: inherit;
  width: inherit;
  padding:0;
  margin:0;
  border: none;
  cursor: pointer;
  display: block;
}
button#menuebutton>span{
  display:block;
  position: absolute;
  border:0;
  margin: 0;
  padding: 0;
  height: 0.15rem;
  width: inherit;
  background-color: var(--col-bor);
  transform: translateY(-50%);
  transition: .3s;
}
button#menuebutton>#strich1{top: 0%;}
button#menuebutton>#strich2{top: 50%;}
button#menuebutton>#strich3{top: 100%;}
button#menuebutton[data-menu-gedrueckt="gedrueckt"]>span#strich1{transform: translateY(-50%) rotate(225deg);top: 50%}
button#menuebutton[data-menu-gedrueckt="gedrueckt"]>span#strich2{opacity: 0;}
button#menuebutton[data-menu-gedrueckt="gedrueckt"]>span#strich3{transform: translateY(-50%) rotate(135deg);top: 50%}
button#menuebutton:active>span{
  top: 50% !important;
  opacity:1 !important;
  transform: none !important;
  background:var(--farbe-orange) !important;
}

div#openmenu>a{
  all:unset;
  display:block;
  height: 1.7rem;
  width: 1.7rem;
  padding:0;
  margin:0;
  margin-top:0.5rem;
  border: 0px solid var(--farbe-orange);
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
div#openmenu>a>img{
  all:unset;
  border:0;
  position: absolute;
  padding: 0;
  width: 0.9rem;
  height: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  filter: var(--filter-ci-img);
}
div#openmenu>a>div{
  border:0;
  position: absolute;
  padding: 0;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 0.5rem;
}
div#openmenu{
  display: flex;
  flex-direction: column;
  height: 0;
  text-align: right;
  background-color: var(--farbe-hintergrund);
  padding: 0 .1rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--zeit-transition);
}
div#openmenu[data-opened="true"]{
  height: 11.3rem;
}