@charset "UTF-8";
/* screen reader only */
.is-visually-hidden, .menu-label, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  margin-bottom: calc(var(--vr) * 1em);
}
.grid-lines {
  display: none;
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 100%;
  border-left: 1px solid #87deaa;
  border-right: 1px solid #87deaa;
}
@media screen and (min-width: 90em) {
  .grid-lines {
    width: 140rem;
    left: calc(50% - 70rem);
    background: linear-gradient(rgba(200, 50, 50, 0.25) 1px, transparent 1px), repeating-linear-gradient(90deg, transparent, transparent 349px, #87deaa 349px, #87deaa 350px), repeating-linear-gradient(90deg, transparent, transparent 466px, #ff55dd 466px, #ff55dd 467px), linear-gradient(90deg, transparent, transparent 233px, #916f7c 233px, #916f7c 234px, transparent 234px, transparent 1166px, #916f7c 1166px, #916f7c 1167px, transparent 1167px);
    background-size: 1px calc(var(--vr) * 1em), auto, auto, auto;
  }
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.header {
  padding: calc(var(--vr) * 0.5em) 0;
}

.content p, .content ul, .content ol {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-bottom: calc(var(--vr) * 1em);
}

.wrapper, .vollebreite, .fullwidth {
  max-width: 94%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.wrapper::before, .vollebreite::before, .fullwidth::before, .wrapper::after, .vollebreite::after, .fullwidth::after {
  content: " ";
  display: table;
}
.wrapper::after, .vollebreite::after, .fullwidth::after {
  clear: both;
}
@media screen and (min-width: 64em) {
  .wrapper, .vollebreite, .fullwidth {
    width: 90rem;
  }
}

.footer {
  clear: both;
  margin-top: calc(var(--vr) * 0.5em);
  padding: calc(var(--vr) * 0.5em) 0 calc(var(--vr) * 1.5em);
}
.footer p {
  margin: 0;
  padding: 0;
}

.partnerlogos {
  padding: calc(var(--vr) * 2em) 0 0;
  margin: 0;
  list-style-type: none;
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  justify-items: center;
  align-items: center;
}
.partnerlogos li {
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 37.5em) {
  .partnerlogos {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

.squares {
  padding: 0;
}
@media screen and (min-width: 37.5em) {
  .squares {
    display: grid;
    justify-items: stretch;
    align-items: stretch;
    grid-template-columns: 50% 50%;
    grid-auto-rows: 15em;
  }
}

.content .squares {
  margin-bottom: calc(var(--vr) * 1em);
}

.square {
  display: flex;
  flex-flow: column;
  justify-content: stretch;
  align-content: stretch;
  align-items: stretch;
}
.square a {
  display: flex;
  height: 100%;
  flex-flow: column;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
  padding: calc(var(--vr) * 1em) calc(var(--vr) * 0.5em);
}
@media screen and (min-width: 37.5em) {
  .square a {
    padding: calc(var(--vr) * 1em);
  }
}
@media screen and (min-width: 64em) {
  .square a {
    padding: calc(var(--vr) * 2em) calc(var(--vr) * 1em);
  }
}
@media screen and (min-width: 87.5em) {
  .square a {
    padding: calc(var(--vr) * 3em) calc(var(--vr) * 1.5em);
  }
}
.square p {
  margin-bottom: 0;
}

.cards, .bookmarks {
  padding: 0;
  margin-bottom: 1em;
}
.cards li, .bookmarks li {
  margin-bottom: 3vw;
}
@media screen and (min-width: 37.5em) {
  .cards li, .bookmarks li {
    margin: 0;
  }
}
@media screen and (min-width: 37.5em) {
  .cards, .bookmarks {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 48% 48%;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    grid-gap: 2vw;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media screen and (min-width: 64em) {
  .cards {
    -ms-grid-columns: 31% 31% 31%;
    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
    grid-gap: 1em;
  }
}

img, video {
  width: 100%;
  height: auto;
}

.sidebar-item iframe {
  width: 100%;
  height: 30vh;
  border: 0;
}
@media screen and (min-width: 64em) {
  .sidebar-item iframe {
    height: 50vh;
  }
}

.hochkant {
  width: 45%;
  margin: 0 auto;
}

.svg-defs {
  height: 0;
  display: block;
}

@media screen and (min-width: 37.5em) {
  .links, .left {
    float: left;
    margin: 0 2% 2% 0;
    width: 30%;
  }
}
.rechts, .right {
  display: block;
}
@media screen and (min-width: 37.5em) {
  .rechts, .right {
    float: right;
    clear: right;
    margin: 0 0 2% 2%;
    width: 30%;
  }
}

.vollebreite, .fullwidth {
  margin-top: calc(var(--vr) * 1em);
  margin-bottom: calc(var(--vr) * 1em);
  display: block;
}

.entbehrlich, .expendable {
  display: none;
}
@media screen and (min-width: 37.5em) {
  .entbehrlich, .expendable {
    display: inline-block;
  }
}

@media screen and (min-width: 37.5em) {
  .sidebar-item .flex {
    display: flex;
  }
}
@media screen and (min-width: 64em) {
  .sidebar-item .flex {
    flex-flow: column nowrap;
    width: 10em;
  }
  .sidebar-item .flex > * {
    margin-bottom: 1em;
  }
}

nav ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.main-menu {
  padding: 1.5em;
  padding-right: 4em;
  line-height: 1.7;
  position: fixed;
  z-index: 0;
  left: auto;
  top: 6em;
  bottom: auto;
  right: -1em;
  transform: rotate(-130deg);
  transform-origin: 89% 16%;
}
.main-menu::before, .main-menu::after {
  content: " ";
  display: table;
}
.main-menu::after {
  clear: both;
}
.main-menu:target {
  transform: rotate(0deg);
}
@media screen and (min-width: 64em) {
  .main-menu {
    line-height: 1.5;
  }
}
.main-menu:target {
  visibility: visible;
  z-index: 1000;
  left: auto;
  right: 0;
}
.main-menu li {
  display: block;
  white-space: nowrap;
}
.main-menu a {
  display: block;
}
.main-menu .is-active > a {
  font-weight: bold;
  color: #222;
}

.menu {
  margin: 0;
}

.menu-toggle {
  position: fixed;
  z-index: 1;
  top: 8.15em;
  right: 0.2em;
  display: flex;
  align-items: center;
  padding: 0.1em;
}
@media screen and (min-width: 90em) {
  .menu-toggle {
    right: calc(50% - 70rem);
  }
}

@media screen and (min-width: 24em) {
  .menu-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    margin-left: 0.2em;
  }
}

.menu-close {
  position: absolute;
  display: none !important;
  z-index: -1;
  right: 2%;
  top: 2%;
  padding: 0.3em;
  width: 1.8em;
  height: 1.8em;
}
@media screen and (min-width: 37.5em) {
  .menu-close {
    right: 1.2em;
    top: calc(var(--vr) * 1em);
  }
}

.main-menu:target .menu-close,
.main-menu[aria-expanded=true] .menu-close {
  z-index: 10001;
  display: block !important;
}

.main-menu:target ul,
.main-menu[aria-expanded=true] ul {
  position: relative;
  z-index: 1000;
}

@media screen and (min-width: 50em) {
  .menu-toggle, .main-menu .menu-close {
    display: none;
  }
  .main-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    padding: 0;
    z-index: 3;
  }
  .main-menu::after {
    clear: none;
  }
  .menu {
    border-top: 0;
    margin: 0 auto;
    width: 90rem;
    max-width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (min-width: 50em) and (min-width: 50em) {
  .menu {
    max-width: 94%;
  }
}
@media screen and (min-width: 50em) {
  .menu li {
    border-bottom: 0;
  }
  .menu li.is-active a {
    background-color: var(--c-navlink-active-bg);
    color: var(--c-navlink-active);
  }
}
@media screen and (min-width: 50em) {
  .menu li:hover a, .menu li:focus-within a {
    background-color: var(--c-navlink-active-bg);
    color: var(--c-navlink-active);
  }
}
.pagination {
  padding: 0;
  margin: 1.5em auto;
  text-align: center;
}
.pagination li {
  display: inline-block;
  margin: 0 0.1rem;
  color: #767676;
  border: 0;
}
.pagination .is-disabled {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.pagination .pagination-item {
  padding: 0.75em;
  border: 2px solid var(--c-links);
  border-radius: 0.2em;
  text-decoration: none;
  color: var(--c-text);
}
.pagination .pagination-item[aria-current] {
  border-color: var(--c-links);
  background-color: var(--c-links);
  color: #fff;
}
.pagination .pagination-item[rel=prev], .pagination .pagination-item[rel=next] {
  border-color: transparent;
  color: var(--c-links);
  padding: 0.75em 0.375em;
}

.prevnext {
  padding-top: 3em;
}
.prevnext::before, .prevnext::after {
  content: " ";
  display: table;
}
.prevnext::after {
  clear: both;
}
.prevnext a {
  position: relative;
  display: inline-block;
}
.prevnext .nav-prev {
  float: left;
  margin-left: 1em;
}
.prevnext .nav-prev::before {
  content: "«";
  position: absolute;
  left: -1em;
  color: #767676;
}
.prevnext .nav-next {
  float: right;
  margin-right: 1em;
}
.prevnext .nav-next::after {
  content: "»";
  position: absolute;
  right: -1em;
  color: #767676;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-BoldItalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-BoldItalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
body {
  font-size: 1.6rem;
  line-height: 1.5;
}
@media screen and (min-width: 64em) {
  body {
    font-size: 2rem;
  }
}
@media screen and (min-width: 87.5em) {
  body {
    font-size: 2.4rem;
  }
}

h1 {
  font-size: 3.2rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 64em) {
  h1 {
    font-size: 3.6rem;
  }
}
@media screen and (min-width: 87.5em) {
  h1 {
    font-size: 4rem;
  }
}

h2 {
  font-size: 2.4rem;
  line-height: 1;
  margin: 0;
  margin-top: 1.5em;
}
@media screen and (min-width: 64em) {
  h2 {
    font-size: 3rem;
  }
}
@media screen and (min-width: 87.5em) {
  h2 {
    font-size: 3.6rem;
    line-height: 1;
  }
}

h1 + h2 {
  margin-top: 0.5em;
}

h2 + h3 {
  margin-top: 0;
}

h3 {
  font-size: 1.8rem;
  margin: 0;
  margin-top: 1.5em;
}
@media screen and (min-width: 64em) {
  h3 {
    font-size: 2.2rem;
  }
}
@media screen and (min-width: 87.5em) {
  h3 {
    font-size: 2.6rem;
  }
}

a[href^="mailto:"], .mailto {
  margin-left: 1.4em;
  white-space: nowrap;
}
a[href^="mailto:"]::before, .mailto::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 16'%3E%3Cpath d='M1.315 1.274A1.006 1.006 0 001 2.007v11.986A.999.999 0 002.003 15h20.994C23.55 15 24 14.55 24 13.993V2.007c0-.29-.12-.551-.313-.735L12.5 11 1.315 1.274zM2.004 0A2 2 0 000 1.994v12.012C0 15.107.89 16 2.004 16h20.992A2 2 0 0025 14.006V1.994C25 .893 24.11 0 22.996 0zM12.5 9.7l10-8.7h-20z' fill='var(--c-links)' fill-rule='evenodd'/%3E%3C/svg%3E") center no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  width: 1em;
  height: 0.5em;
  margin-left: -1.2em;
  margin-right: 0.2em;
}

.button svg {
  fill: currentcolor;
  width: 1.2em;
  height: 1em;
}

/* custom styles for Haecksen Antistalking */
html {
  --vr: 1.5;
  --textfont: "Roboto", sans-serif;
  --headingfont: "Roboto Condensed";
  --c-links: #0084b0;
  --c-links-hover: #ab1e23;
  --c-navlinks: #0084b0;
  --c-text: #222;
  --c-menu-toggle: #2277aa;
}

body {
  font-family: "Roboto", sans-serif;
  color: #222;
  background: url("../images/bg.svg") repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow-x: clip;
}

h1, h2, h3 {
  font-weight: bold;
}

h1, h2 {
  font-family: "Roboto Condensed";
}

h3 {
  font-style: italic;
  clear: both;
}

h4 {
  margin: 0;
}

strong {
  font-weight: 700;
}

ul {
  padding-left: 1em;
}

hr {
  height: 3px;
  border-top: 1px solid #9776bc;
  border-bottom: 1px solid #9776bc;
  background: transparent;
  border-left: none;
  border-right: none;
  clear: both;
}

::marker {
  color: #9776bc;
}

.header {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
  overflow-x: clip;
}
.header::after {
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.6);
  transform: skewY(10deg);
  transform-origin: 0% 50%;
  content: "";
  display: block;
  width: 100%;
  max-width: 180rem;
  height: 19em;
  position: absolute;
  bottom: 3em;
  left: 0;
  z-index: 1;
}
@media screen and (min-width: 37.5em) {
  .header::after {
    bottom: 5em;
  }
}
@media screen and (min-width: 50em) {
  .header::after {
    bottom: 7em;
  }
}
@media screen and (min-width: 64em) {
  .header::after {
    width: 200%;
    transform-origin: 50% 50%;
    bottom: 2em;
    left: calc(50% - 90rem);
  }
}

.siteinfo {
  position: relative;
  z-index: 2;
  padding-top: 0.3em;
}
.siteinfo::before, .siteinfo::after {
  content: " ";
  display: table;
}
.siteinfo::after {
  clear: both;
}
.siteinfo .title {
  color: #222;
  text-decoration: none;
  font-family: "Roboto Condensed";
  font-weight: bold;
  font-size: 2rem;
  position: absolute;
  bottom: 0.5em;
  transform: rotate(10deg);
  display: block;
}
@media screen and (min-width: 30em) {
  .siteinfo .title {
    font-size: 1.5em;
    bottom: 0.2em;
  }
}
@media screen and (min-width: 37.5em) {
  .siteinfo .title {
    bottom: 1.4em;
  }
}
@media screen and (min-width: 50em) {
  .siteinfo .title {
    bottom: 2.7em;
  }
}
@media screen and (min-width: 64em) {
  .siteinfo .title {
    bottom: 2em;
  }
}
@media screen and (min-width: 87.5em) {
  .siteinfo .title {
    bottom: 1.6em;
  }
}

.logo {
  position: relative;
  text-decoration: none;
  display: inline-block;
  width: 20vw;
  max-width: 7em;
  height: auto;
  float: right;
}
@media screen and (min-width: 50em) {
  .logo {
    margin-top: 2em;
  }
}

.menu-toggle {
  color: #fff;
  background-color: #9776bc;
  text-decoration: none;
  transition: transform ease 0.1s;
}
.menu-toggle:hover, .menu-toggle:focus {
  background-color: transparent;
  box-shadow: none;
  transform: scale(1.3);
}
.menu-toggle svg {
  fill: currentcolor;
  width: 1.5em;
  height: 1.3em;
}

.menu-label {
  text-transform: uppercase;
  font-weight: 700;
}

.main-menu {
  background: #9776bc;
  transition: ease 0.5s all;
}
.main-menu a {
  text-decoration: none;
  padding: 0.3em 0.2em;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}
.main-menu a:hover {
  color: #9776bc;
  text-decoration: none;
}
@media screen and (min-width: 50em) {
  .main-menu a {
    padding: 0.3em 0;
  }
}

.menu-close {
  color: #fff;
}
.menu-close svg {
  stroke: currentcolor;
  stroke-width: 2px;
  width: 100%;
  height: 100%;
}

.link-to-top {
  display: none;
  transition: ease all 0.3s;
}
.link-to-top:hover, .link-to-top:focus {
  transform: scale(1.2);
}
@media screen and (min-width: 64em) {
  .link-to-top {
    display: flex;
    width: 3em;
    height: 3em;
    background-color: #ddd;
    position: fixed;
    z-index: 10;
    right: 3%;
    bottom: 3%;
    padding: 0.5em;
    align-items: center;
  }
}
@media screen and (min-width: 90em) {
  .link-to-top {
    left: calc(50% + 64rem);
    right: auto;
  }
}

.skip-link {
  position: absolute;
  background: #ddd;
  display: block;
  padding: 0.75em;
  text-decoration: none;
}

a {
  text-decoration: underline;
  color: #222;
  transition: ease all 0.2s;
}
a:hover, a:focus {
  text-decoration: none;
  background-color: #fff;
}

/* emails */
/* pdfs */
#tagcloud a {
  border: 0;
  display: inline-block;
  margin-right: 0.3rem;
  transition: ease all 0.1s;
}
#tagcloud a:hover {
  color: #0084b0;
  transform: scale(110%);
}

#tagcloud .smallest {
  font-size: x-small;
}

#tagcloud .small {
  font-size: small;
}

#tagcloud .medium {
  font-size: medium;
}

#tagcloud .large {
  font-size: large;
}

#tagcloud .largest {
  font-size: x-large;
}

/* external links */
a[href^=http]:not([id=escape]) {
  position: relative;
  display: inline-flex;
  align-items: center;
}
a[href^=http]:not([id=escape])::after {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 205.229 205.229' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M98.306 5.744h8.614v197.302h-8.614zm36.862 192.424-7.927-3.382c40.971-95.92 5.801-180.832 5.436-181.677l7.927-3.378c.369.873 37.023 89.016-5.436 188.437zm-65.769 0C26.933 98.747 63.584 10.604 63.959 9.727l7.927 3.378c-.365.845-35.534 85.756 5.44 181.677zm-48.983-37.596-2.459-8.26c84.271-25.081 165.898-1.027 169.333 0l-2.494 8.256c-.82-.25-82.654-24.328-164.38.004zm84.525-98.461c-48.644 0-84.94-10.704-87.199-11.388l2.494-8.253c.816.247 82.657 24.336 164.38-.004l2.452 8.26c-28.663 8.54-57.047 11.385-82.127 11.385zM5.746 98.304H199.48v8.618H5.746Zm96.872 106.925C46.033 205.229.002 159.198.002 102.613.002 46.031 46.033 0 102.618 0 159.2 0 205.227 46.031 205.227 102.613c0 56.585-46.027 102.616-102.609 102.616zm0-196.611c-51.829 0-94.002 42.166-94.002 93.995 0 51.829 42.17 93.995 94.002 93.995 51.825 0 93.988-42.162 93.988-93.995 0-51.829-42.162-93.995-93.988-93.995z' fill='%239776bc'/%3E%3C/svg%3E") center no-repeat;
  background-size: contain;
  display: inline-block;
  position: relative;
  content: "";
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.2em;
  top: 0.1em;
}
a[href^=http]:not([id=escape])::before {
  content: "zu externer Seite wechseln";
  padding: 0.1em;
  display: none;
  position: absolute;
  top: -2em;
  left: calc(50% - 6em);
  width: 13em;
  text-align: center;
  font-weight: normal;
  background-color: #fef4c5;
  border: 1px solid #d4b943;
  border-radius: 2px;
}
a[href^=http]:not([id=escape]):hover::before, a[href^=http]:not([id=escape]):focus::before {
  display: block;
}

.cards {
  list-style-type: none;
  padding-top: 0.5em;
}
.cards a:not([id=escape]) {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5em 1em;
  text-decoration: none !important;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  border-radius: 0.5em;
  box-shadow: 0 0 0.5em #9776bc;
}
.cards a:not([id=escape]):hover {
  box-shadow: 0 0 0.9em #fff;
  border-bottom-width: 1px;
  background-color: rgba(255, 255, 255, 0.7);
}
.cards a:not([id=escape])::after {
  position: absolute;
  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
  width: 2em;
  height: 2em;
  z-index: -1;
}
@media screen and (min-width: 37.5em) {
  .cards a:not([id=escape])::after {
    width: 3em;
    height: 3em;
  }
}

.bookmarks {
  list-style-type: none;
}
.bookmarks li {
  height: 100%;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  box-shadow: 0 0 0.5em #ccc;
  background-color: rgba(255, 255, 255, 0.6);
}
.bookmarks .linked-title {
  display: block;
}
.bookmarks .last-edit {
  font-style: italic;
  font-size: 90%;
  display: block;
}

.sc-notice {
  margin: 0.5em 0;
  padding: 1em;
}

.sc-notice.info {
  background-color: #d4bfff;
  border-left: 0.6em solid #9866ff;
}

.sc-notice.achtung {
  background-color: #ffe7ad;
  border-left: 0.6em solid #ffce57;
}

.sc-notice.gefahr {
  background-color: #ffadc2;
  border-left: 0.6em solid #ff5782;
}

.notices p {
  margin: 0.75em 0;
}

.klappklapp {
  margin-bottom: 3em;
}

.klappklapp h2 {
  cursor: pointer;
}
.klappklapp h2::before {
  color: #0084b0;
  margin-right: 0.1em;
}
.klappklapp h2.plus::before {
  content: "＋";
}
.klappklapp h2.minus::before {
  content: "－";
}

.closed {
  height: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
}

.open {
  height: auto;
  min-height: 4em;
  max-height: 22em;
}

.footer {
  border: 1px solid #fff;
  max-width: 180rem;
  margin: 1.5em auto 0;
  background-color: rgba(255, 255, 255, 0.6);
  padding-top: 1em;
  color: #555;
  font-size: 90%;
}
.footer .last-modified {
  margin-top: 1em;
  font-style: italic;
}

#tagcloud {
  text-align: center;
  margin-bottom: 1.5em;
}

#tagcloud .smallest {
  font-size: x-small;
}

#tagcloud .small {
  font-size: small;
}

#tagcloud .medium {
  font-size: medium;
}

#tagcloud .large {
  font-size: large;
}

#tagcloud .largest {
  font-size: x-large;
}

@media screen and (min-width: 50em) {
  .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
}
@media screen and (min-width: 64em) {
  .grid2 {
    gap: 1.5em;
  }
}

@media screen and (min-width: 50em) {
  .grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
  }
}
@media screen and (min-width: 64em) {
  .grid3 {
    gap: 1.5em;
  }
}

#escape {
  background-color: #00a356;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.4em 0.6em;
  position: fixed;
  z-index: 1000;
  top: 3.5em;
  left: 0;
  transform: translateX(-9.9em);
  right: auto;
  width: 12.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  transition: ease transform 0.3s;
}
#escape:hover, #escape:focus {
  transform: translateX(0);
}
#escape svg {
  fill: currentcolor;
  width: 1.4em;
  height: auto;
  margin-left: 0.1em;
}
@media screen and (min-width: 30em) {
  #escape {
    top: 0.9em;
  }
}
@media screen and (min-width: 50em) {
  #escape {
    top: 5em;
  }
}

/*# sourceMappingURL=styles.css.map */