/*
Theme Name: Kulturforschung
Version: 2.1
Author: elektrischerwalfisch
Author URI: http://elektrischerwalfisch.de
*/

/* -------------------------------------- */
/* PT SANS */

/* pt-sans-regular - latin_latin-ext */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-regular.woff2') format('woff2'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-regular.woff') format('woff'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-regular.ttf') format('truetype'); 
  }
  
  /* pt-sans-italic - latin_latin-ext */
  @font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-italic.woff2') format('woff2'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-italic.woff') format('woff'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-italic.ttf') format('truetype'); 
  }
  
  /* pt-sans-700 - latin_latin-ext */
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-700.woff2') format('woff2'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-700.woff') format('woff'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-700.ttf') format('truetype'); 
  }
  
  /* pt-sans-700italic - latin_latin-ext */
  @font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-700italic.woff2') format('woff2'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-700italic.woff') format('woff'), 
         url('fonts/pt-sans/pt-sans-v17-latin_latin-ext-700italic.ttf') format('truetype'); 
  }
  

/* VARIABLEN */
:root {  --content-width01: 1403px;}

:root {  --colordark: #333333;}
:root {  --colorlight: #FFFFFF;}

:root {  --color01: #ededed;} /* GRAU 1 */
:root {  --color02: rgba(51, 51, 51, 0.1);} /* GRAU 2 */
:root {  --color03: #202020;} /* DUNKELGRAU */

:root {  --sidebar-width01: 414px;}
:root {  --sidebar-space01: 153px;} 

:root {  --space-below01: 20px;} /* Vertikaler Abstand 01 */
:root {  --space-below02: 60px;} /* Vertikaler Abstand 02 */

:root {  --side-space01: 80px;} /* Seitlicher Abstand 01 */
:root {  --side-space02: 30px;} /* Seitlicher Abstand 02 */
:root {  --animation01: all 0.4s ease-in-out 0s;} /* Animation 01 */

:root {  --fontsize-s: 14px;} /* Font Size S */
:root {  --fontsize-m: 19px;} /* Font Size Default */
:root {  --fontsize-l: 24px;} /* Font Size L */
:root {  --fontsize-xl: 36px;} /* Font Size XL */

* {margin: 0;padding: 0;box-sizing: border-box;}
header, footer, section, article, nav {display: block;}

body {background: var(--colorlight);color: var(--colordark);font-family: 'PT Sans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;line-height: 1.7;font-size: var(--fontsize-m); }

h1 {font-size: var(--fontsize-xl);font-weight: 700;margin-bottom: var(--space-below02);}
h2, h3 {font-size: var(--fontsize-l);font-weight: 700;}
h1, h2, h3  { line-height: 1.2; color: var(--colordark); }

h4, h5, h6 {color: var(--colordark); font-weight: 400; font-size: inherit;line-height: inherit;}

h2, h3, p, ul, ol {margin-bottom: var(--space-below01);}

a:link, a:visited {color: var(--colordark);text-decoration: underline;}
a:hover {text-decoration: none;outline: 0;}
p {margin-bottom: var(--space-below01);}
ul {list-style: none;}
img {border: none;}
b, strong {font-weight: 700;}
hr {margin-bottom: var(--space-below01); background: var(--colordark);border: medium none;height: 1px;}
table {border-collapse: collapse;border-spacing: 0;}
.invisible,
.screen-reader-text {display: none;}

#wrapper {background: var(--color01);max-width: var(--content-width01);}

#sidebar {width: var(--sidebar-width01);float: left;min-height: 100vh;padding-bottom: var(--space-below02);}
#sidebar p {margin: 0;}
#sidebar a.title {display: block;width: 217px;margin: 40px 0 105px var(--sidebar-space01);}
#sidebar a.title img {display: block;height: auto;width: 100%;border: none;}
#sidebar .menu p {display: none;}
#sidebar .menu {font-size: 0;line-height: 0;margin: 0; transition:var(--animation01)}
#sidebar .menu li {display: block;}
#sidebar .menu li::before {content: '';background: var(--color02);display: block;width: 100%;height: 1px;}
#sidebar .menu li.page_item_has_children > a {position: relative;}
#sidebar .menu li.page_item_has_children > a::after {content: '›';position: absolute;right: 10px;transform: rotate(90deg);font-size: 24px;}
#sidebar .menu li a {display: block; font-size: 18px;line-height: 24px;color: var(--colordark); text-decoration: none;padding: 10px 10px 10px var(--sidebar-space01);}
#sidebar .menu li:is(.current_page_item) > a,
#sidebar .menu li a:hover {background: var(--colorlight);}
#sidebar .menu ul.children {display: none;margin: 0;}
#sidebar .menu li:is(.current_page_item, .current_page_ancestor) > ul.children {display: block;}
#sidebar .menu ul.children li a {font-size: 15px;line-height: 20px;}
#sidebar .menu ul.children > li > a {padding-left: 170px;}
#sidebar .menu ul.children ul.children > li > a {padding-left: 200px;}
#sidebar .menu ul.children > li > a::before {content: '› ';}

#sidebar #toggle-nav {display: none;}

#main {background: var(--colorlight);padding-top: var(--space-below02);padding-bottom: var(--space-below02);margin-left: var(--sidebar-width01);min-height: 100vh;}
#main .content {padding: 0 var(--side-space01) var(--space-below01) var(--side-space01);}
#main > .content > * {margin-bottom: var(--space-below01);}

.editor-styles-wrapper ul.wp-block-list,
#main ul { list-style: disc;}
.editor-styles-wrapper ul.wp-block-list > li,
#main ul > li { margin-left: 20px;}

.wp-block-image {margin-bottom: 0;}
.wp-block-image.alignleft,
.wp-block-image.alignright {margin-bottom: 0;}

#main table {width: 100%;}
#main table th,
#main table td {text-align: left;border: 1px solid var(--color01);padding: 4px 8px;vertical-align: baseline;}

#footer {color: var(--colorlight);background: var(--color03);position: fixed;bottom: 0;left: 0;z-index: 100;width: 100%;padding: 10px 10px 15px 10px;}
#footer .inside {display: flex;justify-content: center;gap: 30px;}
#footer p,
#footer ul.menu {margin: 0;}
#footer ul.menu {font-size: 0;}
#footer ul.menu li {display: inline-block;}
#footer ul.menu li::after {content: '|';padding: 0 5px;font-size: var(--fontsize-s);}
#footer ul.menu li:last-child:after {display: none;}
#footer :is(p, a) {font-size: var(--fontsize-s);color: var(--color01);text-decoration: none;}
#footer a:hover {text-decoration: underline;}

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

  #wrapper {background: var(--colorlight);}
  h1, h2 {font-size: var(--fontsize-l);}

  #sidebar {float: none;min-height: 0;width: auto;padding: var(--space-below01) var(--side-space02);}
  #sidebar a.title {margin: 0 0 var(--space-below01) 0;width: 107px;}
  #sidebar .menu {background: var(--color01);border-bottom: 1px solid var(--color01);}
  #sidebar .menu li::before {height: 0;transition: var(--animation01);}
  #sidebar .menu li a {display: block;overflow: hidden;height: 0;padding: 0 10px;transition: var(--animation01);}
  #sidebar .menu ul.children > li > a {padding-left: 20px;}
  #sidebar .menu ul.children ul.children > li > a {padding-left: 30px;}
  #sidebar .menu ul.children {display: block;}    
  #sidebar.menu-active .menu li::before {height: 1px;}
  #sidebar.menu-active .menu li a {height: 46px!important;padding-top: 10px;padding-bottom: 10px;}
  #sidebar #toggle-nav {cursor: pointer;display: block;width: 30px;position: absolute;top: 40px;right: var(--side-space02);z-index: 1;}
  #sidebar #toggle-nav span {background: var(--colordark);display: block;height: 4px;margin: 6px 0;width: auto;transition: var(--animation01)}
  #sidebar.menu-active #toggle-nav span {opacity: 0;transform-origin: 1px center;}
  #sidebar.menu-active #toggle-nav span:first-child {opacity: 1;transform: rotate(45deg);}
  #sidebar.menu-active #toggle-nav span:last-child {opacity: 1;transform: rotate(-45deg);}

  #main {margin-left: 0;}
  #main .content {padding-left: var(--side-space02);padding-right: var(--side-space02);}

  #footer {position: static;}
  #footer .inside {display: block;text-align: center;}

}