:root {
  --rahmen: #025159;
  --bunt: #04bfbf;
  /* --hintergund: #038C8C30; */
  --hintergund: #d4e1dd;
  --hellhintergund: #bf926b;
  --weitere: #8c452b;
  --dunkel: #025159;
  --hell: #bef5f5;
  --superhell: rgb(246, 245, 239);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  font-family: scrivano, hatch, serif;
  font-size: 1em;
  line-height: 1.6em;
  background: var(--superhell);
  color: var(--dunkel);
  font-weight: 300;
  font-style: normal;
}

h2 {
  font-size: 1.2em;
  line-height: 3.3em;
  letter-spacing: 0.1em;
  /* font-family: "tablet-gothic-narrow", serif; */
  font-family: pelago, sans-serif;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
}
p,
li {
  font-size: 1.6em;
  line-height: 1.7em;
}
p + p {
  margin-top: -0.4em;
}
nav {
  height: 7em;
  background: var(--hintergund);
}
nav ul {
  padding-top: 70px;
  display: flex;
  list-style-type: none;
  padding-left: 0;
}
nav li {
  width: max-content;
  padding: 0 1em;
}
a,
a:visited {
  color: var(--dunkel);
}
.frame-vollebreite {
  /* font-size: 1.2em; */
  background-color: var(--hintergund);
  color: var(--dunkel);
  text-align: center;
  padding: 0.5em;
  /* height: 40vh; */
  font-family: "tablet-gothic-narrow", serif;
  font-weight: 300;
}
.frame-vollebreite strong {
  font-weight: 900;
  letter-spacing: 0.1em;
}

/* .frame-vollebreite h2 {
	max-width: 30em;
	text-align: left;
	font-family: "tablet-gothic-narrow", serif;
} */
summary {
  font-size: 1.4em;
  font-style: italic;
  max-width: 80vw;
}
details {
  border: var(--dunkel) 1px solid;
  padding: 0.5em;
}
@media (min-width: 40em) {
  nav {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    justify-items: center;
  }
  nav ul {
    padding: 22px 0 0 26px;
  }
  .frame {
    display: grid;
  }
  .frame-vollebreite,
  .frame-halbebreite {
    justify-content: center;
    justify-items: center;
  }

  p,
  ul {
    max-width: 38em;
  }
  .frame-default {
    display: grid;
    max-width: 80em;
    padding-left: 2em;
    padding-right: 2em;
    grid-template-rows: auto auto;
    gap: 0 2em;
    /* max-width: 40em; */
    margin: 2em auto;
  }
  .frame-default:nth-of-type(odd) {
    grid-template-columns: [frame-default-header-start] 1fr [frame-default-header-end frame-default-body-start] 1fr [frame-default-body-end];
    border-bottom: 12px var(--superhell) solid;
  }
  .frame-default:nth-of-type(even) {
    grid-template-columns: [frame-default-body-start] 1fr [frame-default-body-end frame-default-header-start] 1fr [frame-default-header-end];
    border-bottom: 12px var(--superhell) solid;
  }
  .frame-default header {
    grid-column: frame-default-header;
    grid-row: 1 / -1;
  }
  .frame-default:nth-of-type(odd) header {
    text-align: right;
  }
  .frame-default:nth-of-type(even) header {
    text-align: left;
  }
  .frame-default:nth-of-type(even) p {
    text-align: right;
  }
  .frame-default:nth-of-type(odd) p {
    text-align: left;
  }
  .frame-default header p {
    margin: 1em 0;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: none;
  }

  .frame-default > * {
    grid-column: frame-default-body;
  }
}

nav label,
nav input {
  display: none;
}

/* #################Navigation#################### */
altenav {
  nav {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: left;
    /* justify-content: center; */
    /* min-height: 30px; */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  /*Strip the ul of padding and list styling*/
  .topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    width: 100%;
  }
  /*Create a horizontal list with spacing*/
  .topnav li {
    /* display:inline-block; */
    /* float: left; */
    flex-flow: row wrap;
    margin-right: 1px;
    flex-grow: 1;
    max-width: 300px;
  }
  /*Style for menu links*/
  .topnav li a {
    display: block;
    /* min-width:140px; */
    min-width: 60px;
    padding: 0 5px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background: var(--dunkel);
    text-decoration: none;
  }
  /*Hover state for top level links*/
  .topnav li:hover a {
    background: #6d6a6a;
  }
  /*Style for dropdown links*/
  .topnav li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
  }
  /*Hover state for dropdown links*/
  .topnav li:hover ul a:hover {
    background: var(--dunkel);
    color: #fff;
  }
  /*Hide dropdown links until they are needed*/
  .topnav li ul {
    display: none;
  }
  /*Make dropdown links vertical*/
  .topnav li ul li {
    display: block;
    float: none;
  }
  /*Prevent text wrapping*/
  .topnav li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
  }
  /*Display the dropdown on hover*/
  .topnav ul li a:hover + .hidden,
  .hidden:hover {
    display: block;
  }
  .topnav li.active a {
    background: #626060;
  }
  /*Style 'show menu' label button and hide it by default*/
  .show-menu {
    text-decoration: none;
    color: #fff;
    background: var(--dunkel);
    text-align: center;
    padding: 10px 0;
    display: none;
  }
  /*Hide checkbox*/
  .topnav input[type="checkbox"] {
    display: none;
  }
  /*Show menu when invisible checkbox is checked*/
  .topnav input[type="checkbox"]:checked ~ #menu {
    display: block;
  }

  /*Responsive Styles*/
  @media screen and (max-width: 760px) {
    /*Make dropdown links appear inline*/
    .topnav ul {
      position: static;
      display: none;
    }
    /*Create vertical spacing*/
    .topnav li {
      margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    .topnav ul li,
    li a {
      width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
      display: block;
    }
  }
}