a,
a:visited,
a:active {
  text-decoration: none;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1,
h2,
h3 {
  font-weight: 700;
  margin-top: 0;
}

p {
  margin-top: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  border: none;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  appearance: auto;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
  appearance: auto;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@keyframes flip-in {
  0% {
    transform: rotateZ(360deg) rotateX(0deg);
  }
  100% {
    transform: rotateZ(0deg) rotateX(360deg);
  }
}
@keyframes scale-in {
  0% {
    transform: scale(0) rotateY(90deg);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes neu {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(6);
  }
}
@keyframes menue-toggle {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes menue-drehen {
  0% {
    transform: rotateY(360deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes spruchband-ein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes menue {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.75);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(-360deg);
  }
}
/* pacifico-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/pacifico-v22-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* blaka-ink-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Blaka Ink";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/blaka-ink-v8-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* foldit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Foldit";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/foldit-v5-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* aref-ruqqq-ink-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Aref Ruqqq Ink";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/aref-ruqqq-ink-v10-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* bungee-spice-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bungee Spice";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/bungee-spice-v11-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* genos-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Genos";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/genos-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* croissant-one-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Croissant One";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/croissant-one-v26-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nabla-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nabla";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/nabla-v10-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* syncopate-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Syncopate";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/syncopate-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-bubbles-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Rubik Bubbles";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/rubik-bubbles-v3-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* yanone-kaffeesatz-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Yanone Kaffeesatz";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/yanone-kaffeesatz-v29-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* arizonia-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Arizonia";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/arizonia-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* gabriela-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Gabriela";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gabriela-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nabla-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nabla";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/nabla-v9-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/nabla-v9-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/nabla-v9-latin-regular.woff2") format("woff2"), url("../fonts/nabla-v9-latin-regular.woff") format("woff"), url("../fonts/nabla-v9-latin-regular.ttf") format("truetype"), url("../fonts/nabla-v9-latin-regular.svg#Nabla") format("svg"); /* Legacy iOS */
}
/* bungee-spice-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bungee Spice";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/bungee-spice-v8-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/bungee-spice-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bungee-spice-v8-latin-regular.woff2") format("woff2"), url("../fonts/bungee-spice-v8-latin-regular.woff") format("woff"), url("../fonts/bungee-spice-v8-latin-regular.ttf") format("truetype"), url("../fonts/bungee-spice-v8-latin-regular.svg#BungeeSpice") format("svg"); /* Legacy iOS */
}
/* frijole-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Frijole";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/frijole-v14-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/frijole-v14-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/frijole-v14-latin-regular.woff2") format("woff2"), url("../fonts/frijole-v14-latin-regular.woff") format("woff"), url("../fonts/frijole-v14-latin-regular.ttf") format("truetype"), url("../fonts/frijole-v14-latin-regular.svg#Frijole") format("svg"); /* Legacy iOS */
}
/* nova-script-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nova Script";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/nova-script-v25-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/nova-script-v25-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/nova-script-v25-latin-regular.woff2") format("woff2"), url("../fonts/nova-script-v25-latin-regular.woff") format("woff"), url("../fonts/nova-script-v25-latin-regular.ttf") format("truetype"), url("../fonts/nova-script-v25-latin-regular.svg#NovaScript") format("svg"); /* Legacy iOS */
}
/* gotu-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Gotu";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gotu-v14-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/gotu-v14-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/gotu-v14-latin-regular.woff2") format("woff2"), url("../fonts/gotu-v14-latin-regular.woff") format("woff"), url("../fonts/gotu-v14-latin-regular.ttf") format("truetype"), url("../fonts/gotu-v14-latin-regular.svg#Gotu") format("svg"); /* Legacy iOS */
}
/* germania-one-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Germania One";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/germania-one-v20-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/germania-one-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/germania-one-v20-latin-regular.woff2") format("woff2"), url("../fonts/germania-one-v20-latin-regular.woff") format("woff"), url("../fonts/germania-one-v20-latin-regular.ttf") format("truetype"), url("../fonts/germania-one-v20-latin-regular.svg#GermaniaOne") format("svg"); /* Legacy iOS */
}
/* bree-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bree Serif";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/bree-serif-v17-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/bree-serif-v17-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bree-serif-v17-latin-regular.woff2") format("woff2"), url("../fonts/bree-serif-v17-latin-regular.woff") format("woff"), url("../fonts/bree-serif-v17-latin-regular.ttf") format("truetype"), url("../fonts/bree-serif-v17-latin-regular.svg#BreeSerif") format("svg"); /* Legacy iOS */
}
/* bruno-ace-sc-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bruno Ace SC";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/bruno-ace-sc-v1-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/bruno-ace-sc-v1-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bruno-ace-sc-v1-latin-regular.woff2") format("woff2"), url("../fonts/bruno-ace-sc-v1-latin-regular.woff") format("woff"), url("../fonts/bruno-ace-sc-v1-latin-regular.ttf") format("truetype"), url("../fonts/bruno-ace-sc-v1-latin-regular.svg#BrunoAceSC") format("svg"); /* Legacy iOS */
}
/* aclonica-regular - latin */
@font-face {
  font-family: "Aclonica";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/aclonica-v18-latin-regular.woff2") format("woff2"), url("../fonts/aclonica-v18-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* walter-turncoat-regular - latin */
@font-face {
  font-family: "Walter Turncoat";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/walter-turncoat-v19-latin-regular.woff2") format("woff2"), url("../fonts/walter-turncoat-v19-latin-regular.woff") format("woff"); /* Modern Browsers */
}
/* nova-oval-regular - latin */
@font-face {
  font-family: "Nova Oval";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/nova-oval-v24-latin-regular.woff2") format("woff2"), url("../fonts/nova-oval-v24-latin-regular.woff") format("woff"); /* Modern Browsers */
}
/* chango-regular - latin */
@font-face {
  font-family: "Chango";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/chango-v21-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/chango-v21-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/chango-v21-latin-regular.woff2") format("woff2"), url("../fonts/chango-v21-latin-regular.woff") format("woff"), url("../fonts/chango-v21-latin-regular.ttf") format("truetype"), url("../fonts/chango-v21-latin-regular.svg#Chango") format("svg"); /* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v20-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/poppins-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins-v20-latin-regular.woff2") format("woff2"), url("../fonts/poppins-v20-latin-regular.woff") format("woff"), url("../fonts/poppins-v20-latin-regular.ttf") format("truetype"), url("../fonts/poppins-v20-latin-regular.svg#Poppins") format("svg"); /* Legacy iOS */
}
/* amaranth-regular - latin */
@font-face {
  font-family: "Amaranth";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/amaranth-v18-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/amaranth-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/amaranth-v18-latin-regular.woff2") format("woff2"), url("../fonts/amaranth-v18-latin-regular.woff") format("woff"), url("../fonts/amaranth-v18-latin-regular.ttf") format("truetype"), url("../fonts/amaranth-v18-latin-regular.svg#Amaranth") format("svg"); /* Legacy iOS */
}
/* audiowide-regular - latin */
@font-face {
  font-family: "Audiowide";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/audiowide-v16-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/audiowide-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/audiowide-v16-latin-regular.woff2") format("woff2"), url("../fonts/audiowide-v16-latin-regular.woff") format("woff"), url("../fonts/audiowide-v16-latin-regular.ttf") format("truetype"), url("../fonts/audiowide-v16-latin-regular.svg#Audiowide") format("svg"); /* Legacy iOS */
}
/* russo-one-regular - latin */
@font-face {
  font-family: "Russo One";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/russo-one-v14-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/russo-one-v14-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/russo-one-v14-latin-regular.woff2") format("woff2"), url("../fonts/russo-one-v14-latin-regular.woff") format("woff"), url("../fonts/russo-one-v14-latin-regular.ttf") format("truetype"), url("../fonts/russo-one-v14-latin-regular.svg#RussoOne") format("svg"); /* Legacy iOS */
}
/* train-one-regular - latin */
@font-face {
  font-family: "Train One";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/train-one-v13-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/train-one-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/train-one-v13-latin-regular.woff2") format("woff2"), url("../fonts/train-one-v13-latin-regular.woff") format("woff"), url("../fonts/train-one-v13-latin-regular.ttf") format("truetype"), url("../fonts/train-one-v13-latin-regular.svg#TrainOne") format("svg"); /* Legacy iOS */
}
/* gluten-100 - latin */
@font-face {
  font-family: "Gluten";
  font-style: normal;
  font-weight: 100;
  src: local(""), url("../fonts/gluten-v9-latin-100.woff2") format("woff2"), url("../fonts/gluten-v9-latin-100.woff") format("woff"); /* Modern Browsers */
}
/* gluten-regular - latin */
@font-face {
  font-family: "Gluten";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gluten-v9-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/gluten-v9-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/gluten-v9-latin-regular.woff2") format("woff2"), url("../fonts/gluten-v9-latin-regular.woff") format("woff"), url("../fonts/gluten-v9-latin-regular.ttf") format("truetype"), url("../fonts/gluten-v9-latin-regular.svg#Gluten") format("svg"); /* Legacy iOS */
}
/* happy-monkey-regular - latin */
@font-face {
  font-family: "Happy Monkey";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/happy-monkey-v14-latin-regular.woff2") format("woff2"), url("../fonts/happy-monkey-v14-latin-regular.woff") format("woff"); /* Modern Browsers */
}
/* bubblegum-sans-regular - latin */
@font-face {
  font-family: "Bubblegum Sans";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/bubblegum-sans-v16-latin-regular.woff2") format("woff2"), url("../fonts/bubblegum-sans-v16-latin-regular.woff") format("woff"); /* Modern Browsers */
}
/* yatra-one-regular - latin */
/* nova-square-regular - latin */
/* nova-flat-regular - latin */
/* indie-flower-regular - latin */
/* latin */
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2) format("woff2");
}
/* latin */
@font-face {
  font-family: "Comfortqq";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/comfortqq/v40/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4WjMDrMfIA.woff2) format("woff2");
}
/* latin */
@font-face {
  font-family: "Combo";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/combo/v21/BXRlvF3Jh_fIhj0lDO4.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* aleo-regular - latin */
/* amita-regular - latin */
@font-face {
  font-family: "Amita";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/amita-v16-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/amita-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/amita-v16-latin-regular.woff2") format("woff2"), url("../fonts/amita-v16-latin-regular.woff") format("woff"), url("../fonts/amita-v16-latin-regular.ttf") format("truetype"), url("../fonts/amita-v16-latin-regular.svg#Amita") format("svg"); /* Legacy iOS */
}
/* architects-daughter-regular - latin */
@font-face {
  font-family: "Architects Daughter";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/architects-daughter-v18-latin-regular.woff2") format("woff2"), url("../fonts/architects-daughter-v18-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* rubik-bubbles-regular - latin */
@font-face {
  font-family: "Rubik Bubbles";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/rubik-bubbles-v2-latin-regular.woff2") format("woff2"), url("../fonts/rubik-bubbles-v2-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* kalam-regular - latin */
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/kalam-v16-latin-regular.woff2") format("woff2"), url("../fonts/kalam-v16-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* titan-one-regular - latin */
@font-face {
  font-family: "Titan One";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/titan-one-v13-latin-regular.woff2") format("woff2"), url("../fonts/titan-one-v13-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nova-cut-regular - latin */
@font-face {
  font-family: "Nova Cut";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/nova-cut-v24-latin-regular.woff2") format("woff2"), url("../fonts/nova-cut-v24-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* sofadi-one-regular - latin */
@font-face {
  font-family: "Sofadi One";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/sofadi-one-v21-latin-regular.woff2") format("woff2"), url("../fonts/sofadi-one-v21-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* acme-regular - latin */
@font-face {
  font-family: "Acme";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/acme-v18-latin-regular.woff2") format("woff2"), url("../fonts/acme-v18-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* wallpoet-regular - latin */
@font-face {
  font-family: "Wallpoet";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/wallpoet-v16-latin-regular.woff2") format("woff2"), url("../fonts/wallpoet-v16-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* rowdies-regular - latin */
@font-face {
  font-family: "Rowdies";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/rowdies-v15-latin-regular.woff2") format("woff2"), url("../fonts/rowdies-v15-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* unbounded-regular - latin */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/unbounded-v3-latin-regular.woff2") format("woff2"), url("../fonts/unbounded-v3-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* fredoka-one-regular - latin */
@font-face {
  font-family: "Fredoka One";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/fredoka-one-v13-latin-regular.woff2") format("woff2"), url("../fonts/fredoka-one-v13-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* righteous-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Righteous";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/righteous-v17-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lemonada-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Lemonada";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/lemonada-v28-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* goldman-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Goldman";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/goldman-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* coiny-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Coiny";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/coiny-v16-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-dots-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Zen Dots";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/zen-dots-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v25-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* adlam-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "ADLaM Display";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/adlam-display-v1-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/lato-v24-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/lato-v24-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v24-latin-regular.woff2") format("woff2"), url("../fonts/lato-v24-latin-regular.woff") format("woff"), url("../fonts/lato-v24-latin-regular.ttf") format("truetype"), url("../fonts/lato-v24-latin-regular.svg#Lato") format("svg"); /* Legacy iOS */
}
/* aclonica-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Aclonica";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/aclonica-v22-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* aladin-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Aladin";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/aladin-v24-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
my_font {
  transition: all 1s ease-in-out;
  background: linear-gradient(90deg, red 0%, green 25%, blue 50%, green 75%, red 100%);
  background-clip: text;
  color: transparent;
  font-family: "Goldman";
  letter-spacing: 2px;
  font-weight: 900;
}

* {
  list-style-type: none;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: scroll;
  text-align: center;
  background-position: center center;
  background-size: 100% 100%;
  border: none;
  animation: fade-in 333ms ease-in-out;
  color: #161a1d;
}

h3 {
  font-size: 1rem;
}

hr {
  margin-left: 5%;
  margin-right: 5%;
  height: 7px;
  width: 90%;
  background: linear-gradient(0deg, #8a9da8 0%, kornblumeblue 15px, kornblumeblue calc(100% - 15px), #8a9da8 100%);
  border: solid 1px #576a75;
  border-radius: 55%;
  backdrop-filter: blur(0.5px);
}

a {
  color: blue;
}

@media all and (orientation: landscape) {
  * {
    transition: all 333ms ease-in-out;
  }
  #zz_opsys {
    position: fixed;
    bottom: 3vh;
    left: 2vw;
    height: 6vh;
    width: 15vw;
  }
  #zz_opsys p {
    color: #000;
    font-size: 14px;
  }
  #zz_hinten {
    background-image: url("../images/back1.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: grid;
    grid-template-rows: 5px 10vh 10vh 10vh 6vh 1fr 5px;
    grid-template-columns: calc(50px + 15vw) 1fr calc(15vw + 50px);
    grid-template-areas: "        .           .              .     " "        spruch      spruch         spruch     " "        links       headeroben     rechts     " "        links       headermitte    rechts     " "        links       menue          rechts     " "        links       container      rechts     " "        links       footer         rechts     ";
  }
  #zz_container {
    grid-area: container;
    margin-left: 5vw;
    margin-right: 5vw;
    scrollbar-width: none;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 3px;
    place-content: start;
    margin-top: 1vh;
  }
  #zz_container::-webkit-scrollbar {
    display: none;
  }
  #zz_spruch {
    z-index: 99;
    grid-area: spruch;
    display: grid;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 1rem;
    margin: 0 50px 0 50px;
  }
  #zz_spruch p {
    font-weight: normal;
    font-size: 1.2vh;
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 1px black, 0 0 2px black, 0 0 3px black;
  }
  #zz_spruch my_font {
    font-size: 1.6vh;
    font-weight: 900;
    color: yellow;
    text-shadow: 0 0 1px #161a1d, 0 0 2px #161a1d, 0 0 3px #161a1d, 0 0 4px #161a1d;
    letter-spacing: 5px;
  }
  #zz_links {
    position: fixed;
    z-index: 88;
    top: calc(20vh + 5px);
    left: 50px;
    width: 15vw;
    bottom: 5px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: all 500ms ease-in-out;
  }
  #zz_rechts {
    position: fixed;
    z-index: 88;
    top: calc(20vh + 5px);
    right: 50px;
    width: 15vw;
    bottom: 5px;
    display: grid;
    transition: all 500ms ease-in-out;
  }
  #zz_info {
    position: fixed;
    top: 20vh;
    bottom: 0;
    left: 50px;
    width: 15vw;
    scrollbar-width: none;
    overflow-y: scroll;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  #zz_info::-webkit-scrollbar {
    display: none;
  }
  #zz_info p {
    font-family: "Yanone Kaffeesatz";
    text-align: center;
    color: #161a1d;
    font-size: 1.99vh;
  }
  #zz_clock {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    position: fixed;
    top: calc(5px + 10vh);
    height: 10vh;
    right: 50px;
    width: 15vw;
    font-family: monospace;
    font-size: 1.8rem;
    font-weight: bolder;
    color: #414f58;
    text-shadow: 0px 0px 2px red, 0px 0px 4px #e2e6e9, 0px 0px 6px #e2e6e9;
    transition: all 0.333s;
  }
  /* Tooltip mit ::after */
  #zz_clock::after {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    content: "Neue Bilder";
    visibility: hidden;
    opacity: 0;
    color: blue;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 99;
    transition: opacity 500ms ease-in-out, visibility 0.3s ease;
    pointer-events: none;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 45%;
    height: 100%;
    transform: scale(0.75);
  }
  /* Tooltip anzeigen bei Hover */
  #zz_clock:hover::after {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    visibility: visible;
    opacity: 1;
  }
  .imp {
    z-index: 99;
    position: relative;
    left: 0%;
    right: 0%;
    width: 100%;
    height: auto;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
  }
  .imp div {
    padding: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .zz_nextpic,
  .zz_prevpic {
    position: fixed;
    z-index: 99 !important;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    bottom: 5vh;
    width: 8vw;
    height: 4vw;
    overflow: hidden;
    background-size: 77% 77%;
    background-repeat: no-repeat;
    font-family: "Fredoka One";
    font-size: 4rem;
    color: black;
    text-shadow: 1px 1px 5px white;
    transform: scaleY(0.75) scaleX(2);
  }
  .zz_nextpic:hover,
  .zz_prevpic:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .zz_prevpic {
    left: 1vw;
  }
  .zz_nextpic {
    right: 1vw;
  }
  #zz_historyback {
    z-index: 99;
    position: fixed;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
    left: 47vw;
    right: 47vw;
    top: 2vh;
    height: 6vh;
  }
  #zz_historyback p {
    font-family: "Goldman";
    color: white;
    text-shadow: 0 0 5px #000;
    font-size: 13px;
    font-weight: bolder;
    padding: 0 2rem 0.75rem 0;
  }
  #zoomcontainer {
    background-image: url("../images/00a.jpg");
    background-size: 100% 100%;
    position: fixed;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 5vh;
    padding-bottom: 2vh;
    mask-image: linear-gradient(black 0 0) content-box;
    mask-composite: exclude;
    -webkit-mask-composite: xor;
  }
  #zoomcontainer .zoombild {
    display: grid;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: contain;
    animation: scale-in 333ms ease-in-out;
  }
  #zoomcontainer .zoombild:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #zoomcontainer #zz_bildtext {
    position: absolute;
    display: grid;
    place-items: center;
    top: 0;
    width: 100%;
    height: 5vh;
    z-index: 55 !important;
  }
  #zoomcontainer #zz_bildtext p {
    font-weight: bolder;
  }
  a {
    color: blue;
  }
  body {
    background-color: hsl(203, 100%, 78%);
    max-width: 100dvw;
    max-height: 100dvh;
  }
  #zz_begin {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-position: center center;
    background-image: url("../images/00a.jpg");
    background-size: 112% 112%;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #zz_begin p {
    line-height: 1.3;
  }
  #spruchband_maxl,
  #spruchband_mary {
    z-index: 55;
    position: absolute;
    color: transparent;
    text-align: center;
    transform: scale(0.03);
  }
  #spruchband_maxl {
    top: 35dvh;
    left: 35dvw;
    width: 30vw;
  }
  #spruchband_mary {
    top: 35dvh;
    left: 35dvw;
    width: 30vw;
  }
  #zz_anzeige {
    display: grid;
    place-items: center;
    margin-bottom: 2dvh;
  }
  #zz_anzeige p {
    text-shadow: 0px 3px 5px white;
  }
  .scans {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
  }
  .scans img {
    width: 100%;
    height: auto;
    margin-bottom: 1px;
  }
  #pod,
  #pod1 {
    position: absolute;
    display: grid;
    place-items: center;
    top: 25dvh;
    width: 12dvw;
    height: 14dvw;
    background-position: center center;
    background-size: 100% 100%;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #pod {
    top: 10dvh;
    left: 30dvw;
    background-image: url("../images/ht.png");
  }
  #pod1 {
    top: 53dvh;
    right: 32dvw;
    background-image: url("../images/maxl.png");
  }
  .backto {
    top: auto;
    bottom: 0;
  }
  #zz_bg_videos {
    position: fixed;
    display: grid;
    place-items: center;
    background-image: url("../images/00a.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
  }
  #zz_bg_videos video,
  #zz_bg_videos iframe {
    left: 0;
    top: 0;
    width: 100%;
    height: 78%;
  }
  #zz_bg_videos #movie_player {
    background-color: #414f58;
  }
  .zz_eingabe div {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 3px;
    margin-left: 7vw;
    margin-right: 7vw;
  }
  .zz_eingabe div input[type=text],
  .zz_eingabe div input[type=submit],
  .zz_eingabe div input[type=password],
  .zz_eingabe div textarea {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    padding: 2rem 0 2rem 0;
    font-size: 1rem;
    text-align: center;
    cursor: text;
    overflow: hidden;
    outline: none;
  }
  .zz_eingabe div textarea {
    padding: 2rem;
    height: auto;
    overflow: hidden;
    resize: none;
    box-sizing: border-box;
    height: 15vh;
  }
  .zz_tabelle {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(auto-fit, minmax(11vw, 1fr));
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    grid-template-rows: auto;
  }
  .zz_tabelle .zz_folder {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    position: relative;
    width: 100%;
    aspect-ratio: 1/1.12;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: space-between;
  }
  .zz_tabelle .zz_folder .text {
    border-bottom: solid 1px #8a9da8;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    height: 20%;
    width: 90%;
    margin-left: 5%;
  }
  .zz_tabelle .zz_folder .text p {
    color: #414f58;
    font-size: 100%;
    line-height: 100%;
    font-family: "Yanone Kaffeesatz", sans-serif;
  }
  .zz_tabelle .zz_folder .pic {
    filter: drop-shadow(0 0 3px #161a1d);
    width: 70%;
    height: 60%;
    margin: auto;
    background-size: contain;
  }
  #fontbox {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 40px;
    width: 100%;
    margin-top: -3vh;
  }
  #fontbox div {
    animation: scale-in 333ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 1rem;
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
  }
  #pineingabe {
    position: absolute;
    right: 0;
    top: 10px;
    display: grid;
    place-content: center;
    justify-content: space-around;
    grid-template-columns: repeat(3, 6px);
    grid-auto-rows: 6px;
    grid-gap: 3px;
    padding: 3px;
    transform: scale(1.24) translateX(-32vw) translateY(10vh);
  }
  #pineingabe p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    grid-column: span 3;
  }
  #pineingabe .pin,
  #pineingabe div {
    display: flex;
    cursor: pointer;
    justify-content: space-around;
    align-items: center;
  }
  #pineingabe #result {
    text-align: center;
    grid-column: 2/4;
  }
  #pineingabe #submit {
    display: none;
    grid-column: 2/4;
  }
  #pineingabe #pinok {
    grid-column: 1/4;
  }
  .tagebuchbox {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    display: grid;
    place-items: center;
    padding: 1rem;
    grid-gap: 3px;
  }
  .tagebuchbox .bild {
    background: none;
    background-color: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .tagebuchbox div {
    padding: 1rem;
  }
  .tagebuchbox .bild {
    width: 75%;
    height: auto;
    text-align: center;
  }
  .tagebuchbox .text {
    width: 75%;
    height: auto;
    text-align: center;
  }
  .pod {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    background-position: 50% 50%;
    background-size: contain;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0vh;
    padding: 10px;
    padding-bottom: 33%;
  }
  .pod:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .pod .podtitel {
    position: absolute;
    display: grid;
    place-content: center;
    bottom: 0;
    bottom: 0;
    padding: 10px;
    left: 0;
    right: 0;
    height: 5vh;
  }
  .pod .podtitel p {
    padding: 0;
    color: blue;
    letter-spacing: 2px;
    text-align: center;
  }
  #trex_startseite {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 3px;
  }
  .trex_image {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .trex_image img {
    border-radius: px;
    height: 20dvh;
    margin-top: 4dvh;
    margin-bottom: 4dvh;
  }
  .zz_blog_show_text {
    background-color: #8a9da8;
    position: fixed;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    scrollbar-width: none;
    overflow-y: scroll;
    display: grid;
    place-items: center;
    padding-top: 2vh;
  }
  .zz_blog_show_text::-webkit-scrollbar {
    display: none;
  }
  .zz_blog_show_text a {
    color: blue;
    font-weight: bolder;
    text-shadow: 0px 0px 2px transparent, 0px 0px 3px transparent, 0px 0px 4px transparent;
  }
  .zz_blog_show_text img {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
    max-width: 60%;
    max-height: 60%;
    filter: drop-shadow(0 0 3px #161a1d);
    border-radius: 15px;
    margin-top: -7vh;
  }
  .zz_blog_show_text p {
    text-align: center;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .zz_mybox {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    justify-content: space-around;
    grid-gap: 12px;
    padding: 1rem;
    height: auto;
  }
  .zz_mybox h1 {
    color: #161a1d;
    font-weight: 900;
    font-size: 1.2rem;
    margin: auto;
    text-align: center;
    white-space: pre-wrap;
  }
  .zz_mybox .bild {
    display: grid;
    flex: 1;
    border-right: 1px solid #8a9da8;
    padding-right: 1rem;
  }
  .zz_mybox .bild img {
    max-width: 90%;
    max-height: 90%;
    border-radius: px;
    filter: drop-shadow(0 0 3px #161a1d);
  }
  .zz_mybox .bild img:hover {
    box-shadow: 0 0 1px 1px red;
    transform: scale(1.01);
  }
  .zz_mybox .bild :focus {
    outline: none;
  }
  .zz_mybox .bild a {
    display: grid;
  }
  .zz_mybox .bild a img {
    margin: auto;
  }
  .zz_mybox .text {
    display: flex;
    justify-content: space-between;
    flex: 3;
  }
  .zz_mybox .text p {
    color: #161a1d;
    font-size: 1rem;
    margin: auto;
    text-align: center;
    white-space: pre-wrap;
  }
  .zz_mybox .text p img {
    width: 50%;
    height: auto;
    display: flex;
    margin: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
    box-shadow: 0px 0px 3px 3px #8a9da8;
    border: solid 1px #6c8493;
    border-radius: 6px;
    background-color: #a7b5be;
  }
  #database {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5vh;
  }
  #zz_vorspann {
    display: grid;
    place-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  #zz_vorspann p {
    text-align: center;
  }
  #zz_menue {
    margin: auto;
    margin-top: 6vh;
    width: 100%;
    opacity: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 7.5vh;
    grid-gap: 3px;
    scrollbar-width: none;
    overflow-y: scroll;
  }
  #zz_menue::-webkit-scrollbar {
    display: none;
  }
  #zz_menue .artist {
    transform: scaleY(0.5) translateY(50%);
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #zz_menue .artist p {
    font-weight: bolder;
    text-decoration: underline;
    transform: scaleY(1.5);
    margin-bottom: 15px;
  }
  #zz_maxl {
    width: 5px;
    height: 5px;
    display: grid;
    place-items: center;
  }
  #zz_maxl img {
    width: auto;
    height: 2.5px;
    filter: drop-shadow(0 0 3px #161a1d);
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #zz_mary {
    width: 5px;
    height: 5px;
    display: grid;
    place-items: center;
  }
  #zz_mary img {
    width: 70%;
    height: 80%;
    filter: drop-shadow(0 0 3px #161a1d);
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .zz_blog_eintrag {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 5vh auto auto auto;
    grid-template-areas: "oben " "bild " "text1 " "text2 ";
  }
  .zz_blog_eintrag .monat {
    grid-area: oben;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .monat my_font {
    writing-mode: horizontal-tb;
    font-size: 1.5rem;
  }
  .zz_blog_eintrag .bild {
    grid-area: bild;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .bild img {
    max-height: 40%;
    max-width: 40%;
    filter: drop-shadow(0 0 3px #161a1d);
    border-radius: 5px;
  }
  .zz_blog_eintrag .textoben {
    grid-area: text1;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .textoben p {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .zz_blog_eintrag .textunten {
    grid-area: text2;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .textunten p {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
  }
  .zz_musikmenue {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    margin-top: 15px;
    padding: 15px;
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-gap: 3px;
    scrollbar-width: none;
    overflow-y: scroll;
  }
  .zz_musikmenue::-webkit-scrollbar {
    display: none;
  }
  .zz_musikmenue .musikhead,
  .zz_musikmenue .play {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    flex-direction: column;
    padding: 1rem;
    height: 22vh;
    height: auto;
    padding: 33px;
    grid-column: 1/-1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .zz_musikmenue .musikhead p,
  .zz_musikmenue .play p {
    color: #161a1d;
  }
  .zz_musikmenue .play {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_musikmenue .play p {
    color: #414f58;
  }
  .zz_musikmenue audio {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: auto;
    height: 5vh;
    width: 100%;
  }
  .zz_musikbutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 3px;
    height: 100%;
    padding: 1vh 3vw 1vh 3vw;
  }
  .zz_musikbutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  .zz_musikbutton img {
    max-height: 30px;
  }
  .zz_musikbutton .text {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .zz_musikbutton .text p {
    color: #161a1d;
  }
  #zz_facebook_icon a,
  #zz_instagram_icon a,
  #zz_youtube_icon a,
  #zz_schrift_icon a,
  #zz_reset_icon a,
  #zz_user_icon a,
  #zz_userreg_icon a {
    display: flex;
    align-items: center;
  }
  #zz_facebook_icon img,
  #zz_instagram_icon img,
  #zz_youtube_icon img,
  #zz_schrift_icon img,
  #zz_reset_icon img,
  #zz_user_icon img,
  #zz_userreg_icon img {
    height: 9vh;
    filter: drop-shadow(0 0 3px #161a1d);
    padding: 30px;
  }
  #zz_facebook_icon p,
  #zz_instagram_icon p,
  #zz_youtube_icon p,
  #zz_schrift_icon p,
  #zz_reset_icon p,
  #zz_user_icon p,
  #zz_userreg_icon p {
    font-family: "Russo One";
    color: orange;
    font-weight: 900;
  }
  #zz_back {
    display: grid;
    scrollbar-width: none;
    overflow-y: scroll;
    grid-template-columns: 1fr;
    grid-template-rows: 5px auto 5px;
    grid-template-areas: " kopf " " cont " " unten ";
  }
  #zz_back::-webkit-scrollbar {
    display: none;
  }
  #zz_header_oben {
    grid-area: headeroben;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-items: flex-end;
  }
  #zz_header_oben span {
    font-family: Bruno Ace SC;
    font-size: 1.75vh;
  }
  #zz_header_oben my_font {
    margin-bottom: 1rem;
    font-size: 2.5vh;
  }
  #zz_header_mitte {
    grid-area: headermitte;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 5px;
    padding: 0;
  }
  #zz_header_mitte h1 {
    font-family: Bruno Ace SC;
    font-size: 1.5vh;
    margin-bottom: 1rem;
    color: #161a1d;
  }
  #zz_header_mitte p {
    font-family: Bruno Ace SC;
    font-size: 1.2vh;
    font-weight: bolder;
  }
  #zz_header_mitte my_font {
    font-family: "Frijole";
    font-size: 1.5vh;
    margin: 0 4rem 0 4rem;
    position: relative;
  }
  #zz_header_mitte my_font::after {
    font-family: "BRUNO ACE SC";
    letter-spacing: 2rem;
    font-weight: bolder;
    content: "     Impressum     ";
    position: absolute;
    bottom: -40%;
    left: 48%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    color: #161a1d;
    color: red;
    padding: 5px;
    font-size: 1rem;
    white-space: pre;
    opacity: 0;
    visibility: hidden;
    transition: opacity 333ms ease-in-out;
  }
  #zz_header_mitte my_font:hover::after {
    opacity: 1;
    visibility: visible;
  }
  #zz_footer {
    height: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: space-between;
    gap: 3px;
  }
  #zz_footer div {
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
  }
  #zz_footer div img {
    width: 1.75rem;
    height: 1.75rem;
  }
  #zz_footer div span {
    font-size: 1rem;
    margin-left: 0.1rem;
  }
  .standardbox {
    background-color: hsla(203, 100%, 91%, 0.676);
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px blue;
  }
  #zz_icons_oben_links {
    position: fixed;
    z-index: 99;
    left: calc(15vw + 50px);
    width: calc((100vw - 50px - 50px - 15vw - 15vw - 6px) / 6);
    top: calc(10vh + 5px);
    height: 10vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 3px;
  }
  #zz_icons_oben_links #followText {
    position: absolute;
    left: 0;
    width: 100%;
    top: -2vh;
    height: 45%;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    color: blue;
    font-size: 1.5vh;
    text-align: center;
    font-weight: bolder;
    text-shadow: 0px 0px 5px #e2e6e9, 0px 0px 5px #e2e6e9;
  }
  #zz_icons_oben_links #icons {
    border-radius: px;
    position: absolute;
    left: 1.5vw;
    width: 70%;
    top: 5vh;
    height: 45%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 5px;
  }
  #zz_icons_oben_links #icons a img {
    max-height: 2.5vh;
    width: auto;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  #zz_logo {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: fixed;
    top: calc(5px + 10vh);
    height: 10vh;
    left: 50px;
    width: 15vw;
    overflow: hidden;
  }
  #zz_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  #podcontainer {
    z-index: 99;
    position: fixed;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background-size: 100% auto;
    background-color: #414f58;
  }
  #podcontainer .podbild {
    background-position: 50% 50%;
    background-size: contain;
    animation: scale-in 333ms ease-in-out;
    border-radius: 11px;
  }
  #podcontainer .podbild:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #podcontainer .podtitel {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    margin-top: 1rem;
  }
  #zz_main_menue,
  #zz_trex_menue {
    grid-area: menue;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(55px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 3px;
  }
  #zz_trex_menue {
    grid-template-columns: repeat(8, 1fr);
  }
  #zz_trex_menue .zz_trexmenuebutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    align-items: center;
  }
  #zz_trex_menue .zz_trexmenuebutton .text p {
    font-family: "Goldman", sans-serif;
    font-weight: normal;
    font-size: 100%;
  }
  #zz_trex_menue .zz_trexmenuebutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_iconsleft,
  #zz_iconsright {
    position: fixed;
    z-index: 99;
    width: calc(2 * (100vw - 50px - 50px - 15vw - 15vw - 6px) / 6);
    top: calc(10vh + 5px);
    height: 10vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 3px;
  }
  #zz_iconsleft div,
  #zz_iconsright div {
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #zz_iconsleft div img,
  #zz_iconsright div img {
    max-width: 1.5rem;
    max-height: 1.5rem;
    margin-right: 3px;
  }
  #zz_iconsleft div span,
  #zz_iconsright div span {
    font-family: "Poppins", sans-serif;
    font-weight: bolder;
    transform: scale(0.75);
    font-size: calc(0.4 * (5vh - 3px));
  }
  #zz_iconsleft div p,
  #zz_iconsright div p {
    font-size: calc(0.4 * (5vh - 3px));
  }
  #zz_iconsleft div my_momentan,
  #zz_iconsright div my_momentan {
    font-size: calc(1.3 * 0.4 * (5vh - 3px));
    font-family: "Yanone Kaffeesatz";
  }
  #zz_iconsleft div my_family,
  #zz_iconsright div my_family {
    font-size: calc(0.75 * 0.4 * (5vh - 3px));
  }
  #zz_iconsleft div:hover,
  #zz_iconsright div:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_iconsleft {
    left: calc(15vw + 50px);
  }
  #zz_iconsright {
    right: calc(15vw + 50px);
  }
  .zz_menuebutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: px;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    padding: 0 0.75rem 0 0.75rem;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .zz_menuebutton .bild img {
    max-height: 3vh;
    object-fit: contain;
    margin-top: 30%;
  }
  .zz_menuebutton .text {
    opacity: 1;
    visibility: visible;
  }
  .zz_menuebutton .text p {
    font-family: "Yanone Kaffeesatz", sans-serif;
    transform: translateY(0.3vh);
    line-height: 1.4;
    font-size: 2.5vh;
  }
  .zz_menuebutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
}
@media all and (orientation: portrait) {
  * {
    transition: all 333ms ease-in-out;
  }
  #zz_opsys {
    position: fixed;
    bottom: 3vh;
    left: 2vw;
    height: 6vh;
    width: 15vw;
  }
  #zz_opsys p {
    color: #000;
    font-size: 14px;
  }
  #zz_hinten {
    background-image: url("../images/back1.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: grid;
    grid-template-rows: 22vh 8vh 16vh 10vh 5vh 1fr 5px;
    grid-template-columns: calc(5px + 0vw) 1fr calc(0vw + 5px);
    grid-template-areas: "        .           .              .     " "        spruch      spruch         spruch     " "        links       headeroben     rechts     " "        links       headermitte    rechts     " "        links       menue          rechts     " "        links       container      rechts     " "        links       footer         rechts     ";
  }
  #zz_container {
    grid-area: container;
    margin-left: 0vw;
    margin-right: 0vw;
    scrollbar-width: none;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 4px;
    place-content: start;
    margin-top: 1vh;
  }
  #zz_container::-webkit-scrollbar {
    display: none;
  }
  #zz_spruch {
    z-index: 99;
    grid-area: spruch;
    display: grid;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 1rem;
    margin: 0 5px 0 5px;
  }
  #zz_spruch p {
    font-weight: normal;
    font-size: 1vh;
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 1px black, 0 0 2px black, 0 0 3px black;
  }
  #zz_spruch my_font {
    font-size: 1.2vh;
    font-weight: 900;
    color: yellow;
    text-shadow: 0 0 1px #161a1d, 0 0 2px #161a1d, 0 0 3px #161a1d, 0 0 4px #161a1d;
    letter-spacing: 5px;
  }
  #zz_links {
    position: fixed;
    z-index: 88;
    top: 46vh;
    left: 5px;
    width: 0vw;
    bottom: 5px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: all 500ms ease-in-out;
  }
  #zz_rechts {
    position: fixed;
    z-index: 88;
    top: 46vh;
    right: 5px;
    width: 0vw;
    bottom: 5px;
    display: grid;
    transition: all 500ms ease-in-out;
  }
  #zz_info {
    position: fixed;
    top: 24vh;
    bottom: 0;
    left: 5px;
    width: 0vw;
    scrollbar-width: none;
    overflow-y: scroll;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  #zz_info::-webkit-scrollbar {
    display: none;
  }
  #zz_info p {
    font-family: "Yanone Kaffeesatz";
    text-align: center;
    color: #161a1d;
    font-size: 1.99vh;
  }
  #zz_clock {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    position: fixed;
    top: 30vh;
    height: 16vh;
    right: 5px;
    width: 0vw;
    font-family: monospace;
    font-size: 1.35rem;
    font-weight: bolder;
    color: #414f58;
    text-shadow: 0px 0px 2px red, 0px 0px 4px #e2e6e9, 0px 0px 6px #e2e6e9;
    transition: all 0.333s;
  }
  /* Tooltip mit ::after */
  #zz_clock::after {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    content: "Neue Bilder";
    visibility: hidden;
    opacity: 0;
    color: blue;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 99;
    transition: opacity 500ms ease-in-out, visibility 0.3s ease;
    pointer-events: none;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 45%;
    height: 100%;
    transform: scale(0.75);
  }
  /* Tooltip anzeigen bei Hover */
  #zz_clock:hover::after {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    visibility: visible;
    opacity: 1;
  }
  .imp {
    z-index: 99;
    position: relative;
    left: 0%;
    right: 0%;
    width: 100%;
    height: auto;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
  }
  .imp div {
    padding: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .zz_nextpic,
  .zz_prevpic {
    position: fixed;
    z-index: 99 !important;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    bottom: 5vh;
    width: 8vw;
    height: 4vw;
    overflow: hidden;
    background-size: 77% 77%;
    background-repeat: no-repeat;
    font-family: "Fredoka One";
    font-size: 4rem;
    color: black;
    text-shadow: 1px 1px 5px white;
    transform: scaleY(0.75) scaleX(2);
  }
  .zz_nextpic:hover,
  .zz_prevpic:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .zz_prevpic {
    left: 1vw;
  }
  .zz_nextpic {
    right: 1vw;
  }
  #zz_historyback {
    z-index: 99;
    position: fixed;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
    left: 47vw;
    right: 47vw;
    top: 2vh;
    height: 6vh;
  }
  #zz_historyback p {
    font-family: "Goldman";
    color: white;
    text-shadow: 0 0 5px #000;
    font-size: 13px;
    font-weight: bolder;
    padding: 0 2rem 0.75rem 0;
  }
  #zoomcontainer {
    background-image: url("../images/00a.jpg");
    background-size: 100% 100%;
    position: fixed;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 5vh;
    padding-bottom: 2vh;
    mask-image: linear-gradient(black 0 0) content-box;
    mask-composite: exclude;
    -webkit-mask-composite: xor;
  }
  #zoomcontainer .zoombild {
    display: grid;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: contain;
    animation: scale-in 333ms ease-in-out;
  }
  #zoomcontainer .zoombild:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #zoomcontainer #zz_bildtext {
    position: absolute;
    display: grid;
    place-items: center;
    top: 0;
    width: 100%;
    height: 5vh;
    z-index: 55 !important;
  }
  #zoomcontainer #zz_bildtext p {
    font-weight: bolder;
  }
  a {
    color: blue;
  }
  body {
    background-color: hsl(203, 100%, 78%);
    max-width: 100dvw;
    max-height: 100dvh;
  }
  #zz_begin {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-position: center center;
    background-image: url("../images/00a.jpg");
    background-size: 112% 112%;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #zz_begin p {
    line-height: 1.3;
  }
  #spruchband_maxl,
  #spruchband_mary {
    z-index: 55;
    position: absolute;
    color: transparent;
    text-align: center;
    transform: scale(0.03);
  }
  #spruchband_maxl {
    top: 35dvh;
    left: 35dvw;
    width: 30vw;
  }
  #spruchband_mary {
    top: 35dvh;
    left: 35dvw;
    width: 30vw;
  }
  #zz_anzeige {
    display: grid;
    place-items: center;
    margin-bottom: 2dvh;
  }
  #zz_anzeige p {
    text-shadow: 0px 3px 5px white;
  }
  .scans {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
  }
  .scans img {
    width: 100%;
    height: auto;
    margin-bottom: 1px;
  }
  #pod,
  #pod1 {
    position: absolute;
    display: grid;
    place-items: center;
    top: 25dvh;
    width: 12dvw;
    height: 14dvw;
    background-position: center center;
    background-size: 100% 100%;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #pod {
    top: 10dvh;
    left: 30dvw;
    background-image: url("../images/ht.png");
  }
  #pod1 {
    top: 53dvh;
    right: 32dvw;
    background-image: url("../images/maxl.png");
  }
  .backto {
    top: auto;
    bottom: 0;
  }
  #zz_bg_videos {
    position: fixed;
    display: grid;
    place-items: center;
    background-image: url("../images/00a.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
  }
  #zz_bg_videos video,
  #zz_bg_videos iframe {
    left: 0;
    top: 0;
    width: 100%;
    height: 78%;
  }
  #zz_bg_videos #movie_player {
    background-color: #414f58;
  }
  .zz_eingabe div {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 4px;
    margin-left: 7vw;
    margin-right: 7vw;
  }
  .zz_eingabe div input[type=text],
  .zz_eingabe div input[type=submit],
  .zz_eingabe div input[type=password],
  .zz_eingabe div textarea {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    padding: 2rem 0 2rem 0;
    font-size: 1rem;
    text-align: center;
    cursor: text;
    overflow: hidden;
    outline: none;
  }
  .zz_eingabe div textarea {
    padding: 2rem;
    height: auto;
    overflow: hidden;
    resize: none;
    box-sizing: border-box;
    height: 15vh;
  }
  .zz_tabelle {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(33vw, 1fr));
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    grid-template-rows: auto;
  }
  .zz_tabelle .zz_folder {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    position: relative;
    width: 100%;
    aspect-ratio: 1/1.12;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: space-between;
  }
  .zz_tabelle .zz_folder .text {
    border-bottom: solid 1px #8a9da8;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    height: 20%;
    width: 90%;
    margin-left: 5%;
  }
  .zz_tabelle .zz_folder .text p {
    color: #414f58;
    font-size: 100%;
    line-height: 100%;
    font-family: "Yanone Kaffeesatz", sans-serif;
  }
  .zz_tabelle .zz_folder .pic {
    filter: drop-shadow(0 0 3px #161a1d);
    width: 70%;
    height: 60%;
    margin: auto;
    background-size: contain;
  }
  #fontbox {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 40px;
    width: 100%;
    margin-top: -3vh;
  }
  #fontbox div {
    animation: scale-in 333ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 1rem;
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
  }
  #pineingabe {
    position: absolute;
    right: 0;
    top: 44vh;
    display: grid;
    place-content: center;
    justify-content: space-around;
    grid-template-columns: repeat(3, 8px);
    grid-auto-rows: 8px;
    grid-gap: 4px;
    padding: 4px;
    transform: scale(1.24) translateX(-32vw) translateY(10vh);
  }
  #pineingabe p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    grid-column: span 3;
  }
  #pineingabe .pin,
  #pineingabe div {
    display: flex;
    cursor: pointer;
    justify-content: space-around;
    align-items: center;
  }
  #pineingabe #result {
    text-align: center;
    grid-column: 2/4;
  }
  #pineingabe #submit {
    display: none;
    grid-column: 2/4;
  }
  #pineingabe #pinok {
    grid-column: 1/4;
  }
  .tagebuchbox {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    display: grid;
    place-items: center;
    padding: 1rem;
    grid-gap: 4px;
  }
  .tagebuchbox .bild {
    background: none;
    background-color: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .tagebuchbox div {
    padding: 1rem;
  }
  .tagebuchbox .bild {
    width: 75%;
    height: auto;
    text-align: center;
  }
  .tagebuchbox .text {
    width: 75%;
    height: auto;
    text-align: center;
  }
  .pod {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    background-position: 50% 50%;
    background-size: contain;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0vh;
    padding: 10px;
    padding-bottom: 33%;
  }
  .pod:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .pod .podtitel {
    position: absolute;
    display: grid;
    place-content: center;
    bottom: 0;
    bottom: 0;
    padding: 10px;
    left: 0;
    right: 0;
    height: 5vh;
  }
  .pod .podtitel p {
    padding: 0;
    color: blue;
    letter-spacing: 2px;
    text-align: center;
  }
  #trex_startseite {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 4px;
  }
  .trex_image {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .trex_image img {
    border-radius: 0px;
    height: 20dvh;
    margin-top: 4dvh;
    margin-bottom: 4dvh;
  }
  .zz_blog_show_text {
    background-color: #8a9da8;
    position: fixed;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    scrollbar-width: none;
    overflow-y: scroll;
    display: grid;
    place-items: center;
    padding-top: 2vh;
  }
  .zz_blog_show_text::-webkit-scrollbar {
    display: none;
  }
  .zz_blog_show_text a {
    color: blue;
    font-weight: bolder;
    text-shadow: 0px 0px 2px transparent, 0px 0px 3px transparent, 0px 0px 4px transparent;
  }
  .zz_blog_show_text img {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
    max-width: 60%;
    max-height: 60%;
    filter: drop-shadow(0 0 3px #161a1d);
    border-radius: 15px;
    margin-top: -7vh;
  }
  .zz_blog_show_text p {
    text-align: center;
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .zz_mybox {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    justify-content: space-around;
    grid-gap: 16px;
    padding: 1rem;
    height: auto;
  }
  .zz_mybox h1 {
    color: #161a1d;
    font-weight: 900;
    font-size: 0.9rem;
    margin: auto;
    text-align: center;
    white-space: pre-wrap;
  }
  .zz_mybox .bild {
    display: grid;
    flex: 1;
    border-right: 1px solid #8a9da8;
    padding-right: 1rem;
  }
  .zz_mybox .bild img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 0px;
    filter: drop-shadow(0 0 3px #161a1d);
  }
  .zz_mybox .bild img:hover {
    box-shadow: 0 0 1px 1px red;
    transform: scale(1.01);
  }
  .zz_mybox .bild :focus {
    outline: none;
  }
  .zz_mybox .bild a {
    display: grid;
  }
  .zz_mybox .bild a img {
    margin: auto;
  }
  .zz_mybox .text {
    display: flex;
    justify-content: space-between;
    flex: 3;
  }
  .zz_mybox .text p {
    color: #161a1d;
    font-size: 1rem;
    margin: auto;
    text-align: center;
    white-space: pre-wrap;
  }
  .zz_mybox .text p img {
    width: 50%;
    height: auto;
    display: flex;
    margin: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
    box-shadow: 0px 0px 3px 3px #8a9da8;
    border: solid 1px #6c8493;
    border-radius: 6px;
    background-color: #a7b5be;
  }
  #database {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5vh;
  }
  #zz_vorspann {
    display: grid;
    place-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  #zz_vorspann p {
    text-align: center;
  }
  #zz_menue {
    margin: auto;
    margin-top: 5vh;
    width: 100%;
    opacity: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 11.2vh;
    grid-gap: 4px;
    scrollbar-width: none;
    overflow-y: scroll;
  }
  #zz_menue::-webkit-scrollbar {
    display: none;
  }
  #zz_menue .artist {
    transform: scaleY(0.5) translateY(50%);
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #zz_menue .artist p {
    font-weight: bolder;
    text-decoration: underline;
    transform: scaleY(1.5);
    margin-bottom: 15px;
  }
  #zz_maxl {
    width: 22vh;
    height: 22vh;
    display: grid;
    place-items: center;
  }
  #zz_maxl img {
    width: auto;
    height: 11vh;
    filter: drop-shadow(0 0 3px #161a1d);
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #zz_mary {
    width: 22vh;
    height: 22vh;
    display: grid;
    place-items: center;
  }
  #zz_mary img {
    width: 70%;
    height: 80%;
    filter: drop-shadow(0 0 3px #161a1d);
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  .zz_blog_eintrag {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 5vh auto auto auto;
    grid-template-areas: "oben " "bild " "text1 " "text2 ";
  }
  .zz_blog_eintrag .monat {
    grid-area: oben;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .monat my_font {
    writing-mode: horizontal-tb;
    font-size: 1.5rem;
  }
  .zz_blog_eintrag .bild {
    grid-area: bild;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .bild img {
    max-height: 40%;
    max-width: 40%;
    filter: drop-shadow(0 0 3px #161a1d);
    border-radius: 5px;
  }
  .zz_blog_eintrag .textoben {
    grid-area: text1;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .textoben p {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .zz_blog_eintrag .textunten {
    grid-area: text2;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_blog_eintrag .textunten p {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
  }
  .zz_musikmenue {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    margin-top: 20px;
    padding: 20px;
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-gap: 4px;
    scrollbar-width: none;
    overflow-y: scroll;
  }
  .zz_musikmenue::-webkit-scrollbar {
    display: none;
  }
  .zz_musikmenue .musikhead,
  .zz_musikmenue .play {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    flex-direction: column;
    padding: 1rem;
    height: 22vh;
    height: auto;
    padding: 33px;
    grid-column: 1/-1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .zz_musikmenue .musikhead p,
  .zz_musikmenue .play p {
    color: #161a1d;
  }
  .zz_musikmenue .play {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
  }
  .zz_musikmenue .play p {
    color: #414f58;
  }
  .zz_musikmenue audio {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: auto;
    height: 5vh;
    width: 100%;
  }
  .zz_musikbutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 4px;
    height: 100%;
    padding: 1vh 3vw 1vh 3vw;
  }
  .zz_musikbutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  .zz_musikbutton img {
    max-height: 30px;
  }
  .zz_musikbutton .text {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .zz_musikbutton .text p {
    color: #161a1d;
  }
  #zz_facebook_icon a,
  #zz_instagram_icon a,
  #zz_youtube_icon a,
  #zz_schrift_icon a,
  #zz_reset_icon a,
  #zz_user_icon a,
  #zz_userreg_icon a {
    display: flex;
    align-items: center;
  }
  #zz_facebook_icon img,
  #zz_instagram_icon img,
  #zz_youtube_icon img,
  #zz_schrift_icon img,
  #zz_reset_icon img,
  #zz_user_icon img,
  #zz_userreg_icon img {
    height: 9vh;
    filter: drop-shadow(0 0 3px #161a1d);
    padding: 30px;
  }
  #zz_facebook_icon p,
  #zz_instagram_icon p,
  #zz_youtube_icon p,
  #zz_schrift_icon p,
  #zz_reset_icon p,
  #zz_user_icon p,
  #zz_userreg_icon p {
    font-family: "Russo One";
    color: orange;
    font-weight: 900;
  }
  #zz_back {
    display: grid;
    scrollbar-width: none;
    overflow-y: scroll;
    grid-template-columns: 1fr;
    grid-template-rows: 22vh auto 5px;
    grid-template-areas: " kopf " " cont " " unten ";
  }
  #zz_back::-webkit-scrollbar {
    display: none;
  }
  #zz_header_oben {
    grid-area: headeroben;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-items: flex-end;
  }
  #zz_header_oben span {
    font-family: Bruno Ace SC;
    font-size: 1.75vh;
  }
  #zz_header_oben my_font {
    margin-bottom: 1rem;
    font-size: 2.5vh;
  }
  #zz_header_mitte {
    grid-area: headermitte;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 5px;
    padding: 0;
  }
  #zz_header_mitte h1 {
    font-family: Bruno Ace SC;
    font-size: 1vh;
    margin-bottom: 1rem;
    color: #161a1d;
  }
  #zz_header_mitte p {
    font-family: Bruno Ace SC;
    font-size: 1vh;
    font-weight: bolder;
  }
  #zz_header_mitte my_font {
    font-family: "Frijole";
    font-size: 1.5vh;
    margin: 0 4rem 0 4rem;
    position: relative;
  }
  #zz_header_mitte my_font::after {
    font-family: "BRUNO ACE SC";
    letter-spacing: 2rem;
    font-weight: bolder;
    content: "     Impressum     ";
    position: absolute;
    bottom: -40%;
    left: 48%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    color: #161a1d;
    color: red;
    padding: 5px;
    font-size: 1rem;
    white-space: pre;
    opacity: 0;
    visibility: hidden;
    transition: opacity 333ms ease-in-out;
  }
  #zz_header_mitte my_font:hover::after {
    opacity: 1;
    visibility: visible;
  }
  #zz_footer {
    height: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: space-between;
    gap: 4px;
  }
  #zz_footer div {
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
  }
  #zz_footer div img {
    width: 1.75rem;
    height: 1.75rem;
  }
  #zz_footer div span {
    font-size: 1rem;
    margin-left: 0.1rem;
  }
  .standardbox {
    background-color: hsla(203, 100%, 91%, 0.676);
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px blue;
  }
  #zz_icons_oben_links {
    position: fixed;
    z-index: 99;
    left: calc(0vw + 5px);
    width: calc((100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    top: 30vh;
    height: 16vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 4px;
  }
  #zz_icons_oben_links #followText {
    position: absolute;
    left: 0;
    width: 100%;
    top: -2vh;
    height: 45%;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    color: blue;
    font-size: 2.4vh;
    text-align: center;
    font-weight: bolder;
    text-shadow: 0px 0px 5px #e2e6e9, 0px 0px 5px #e2e6e9;
  }
  #zz_icons_oben_links #icons {
    border-radius: 0px;
    position: absolute;
    left: 1.5vw;
    width: 70%;
    top: 5vh;
    height: 45%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 5px;
  }
  #zz_icons_oben_links #icons a img {
    max-height: 4vh;
    width: auto;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  #zz_logo {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: fixed;
    top: 30vh;
    height: 16vh;
    left: 5px;
    width: 0vw;
    overflow: hidden;
  }
  #zz_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  #podcontainer {
    z-index: 99;
    position: fixed;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background-size: 100% auto;
    background-color: #414f58;
  }
  #podcontainer .podbild {
    background-position: 50% 50%;
    background-size: contain;
    animation: scale-in 333ms ease-in-out;
    border-radius: 11px;
  }
  #podcontainer .podbild:hover {
    cursor: url("../images/ccclick.png") 50 15, crosshair;
  }
  #podcontainer .podtitel {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    margin-top: 1rem;
  }
  #zz_main_menue,
  #zz_trex_menue {
    grid-area: menue;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(55px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 4px;
  }
  #zz_trex_menue {
    grid-template-columns: repeat(8, 1fr);
  }
  #zz_trex_menue .zz_trexmenuebutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    align-items: center;
  }
  #zz_trex_menue .zz_trexmenuebutton .text p {
    font-family: "Goldman", sans-serif;
    font-weight: normal;
    font-size: 100%;
  }
  #zz_trex_menue .zz_trexmenuebutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_iconsleft,
  #zz_iconsright {
    position: fixed;
    z-index: 99;
    width: calc(2 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    top: 30vh;
    height: 16vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 4px;
  }
  #zz_iconsleft div,
  #zz_iconsright div {
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #zz_iconsleft div img,
  #zz_iconsright div img {
    max-width: 1.5rem;
    max-height: 1.5rem;
    margin-right: 4px;
  }
  #zz_iconsleft div span,
  #zz_iconsright div span {
    font-family: "Poppins", sans-serif;
    font-weight: bolder;
    transform: scale(0.75);
    font-size: calc(0.15 * (8vh - 4px));
  }
  #zz_iconsleft div p,
  #zz_iconsright div p {
    font-size: calc(0.15 * (8vh - 4px));
  }
  #zz_iconsleft div my_momentan,
  #zz_iconsright div my_momentan {
    font-size: calc(1.3 * 0.15 * (8vh - 4px));
    font-family: "Yanone Kaffeesatz";
  }
  #zz_iconsleft div my_family,
  #zz_iconsright div my_family {
    font-size: calc(0.75 * 0.15 * (8vh - 4px));
  }
  #zz_iconsleft div:hover,
  #zz_iconsright div:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_iconsleft {
    left: calc(0vw + 5px);
  }
  #zz_iconsright {
    right: calc(0vw + 5px);
  }
  .zz_menuebutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 0px;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    padding: 0 0.75rem 0 0.75rem;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .zz_menuebutton .bild img {
    max-height: 4.48vh;
    object-fit: contain;
    margin-top: 30%;
  }
  .zz_menuebutton .text {
    opacity: 1;
    visibility: visible;
  }
  .zz_menuebutton .text p {
    font-family: "Yanone Kaffeesatz", sans-serif;
    transform: translateY(0.3vh);
    line-height: 1.4;
    font-size: 2.5vh;
  }
  .zz_menuebutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_container {
    margin-top: 4vh;
  }
  .zz_tabelle .zz_folder .text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    height: 15%;
    width: 100%;
  }
  .zz_tabelle .zz_folder .text p {
    color: #414f58;
    font-size: 0.45rem;
    font-weight: 600;
  }
  #zz_main_menue,
  #zz_trex_menue {
    grid-area: menue;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 4px;
  }
  #zz_main_menue .zz_trexmenuebutton,
  #zz_trex_menue .zz_trexmenuebutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
    align-items: center;
  }
  #zz_main_menue .zz_trexmenuebutton .text p,
  #zz_trex_menue .zz_trexmenuebutton .text p {
    font-family: "Goldman", sans-serif;
    font-weight: normal;
    font-size: 60%;
  }
  #zz_main_menue .zz_trexmenuebutton:hover,
  #zz_trex_menue .zz_trexmenuebutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_main_menue .zz_menuebutton,
  #zz_trex_menue .zz_menuebutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  #zz_main_menue .zz_menuebutton .bild,
  #zz_trex_menue .zz_menuebutton .bild {
    display: none;
  }
  #zz_main_menue .zz_menuebutton .text p,
  #zz_trex_menue .zz_menuebutton .text p {
    font-family: "Goldman", sans-serif;
    font-weight: normal;
    font-size: 70%;
    line-height: 1.4;
  }
  #zz_main_menue .zz_menuebutton:hover,
  #zz_trex_menue .zz_menuebutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_clock {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    position: fixed;
    top: 8vh;
    left: calc(15px + 1.9 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    width: calc(15px + 1.9 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    height: 8vh;
    text-shadow: 0px 0px 2px red, 0px 0px 7px #e2e6e9, 0px 0px 11px #e2e6e9;
  }
  #zz_clock::after {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    content: "Neue Bilder";
    visibility: hidden;
    opacity: 0;
    color: white;
    font-size: larger;
    text-shadow: 0px 0px 2px #414f58, 0px 0px 4px #414f58, 0px 0px 6px #414f58;
  }
  #zz_clock::after #zz_clock:hover::after {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    visibility: visible;
    opacity: 1;
  }
  #zz_logo {
    top: 16vh;
    height: 8vh;
    left: calc(15px + 1.9 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    width: calc(15px + 1.9 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
  }
  #zz_logo img {
    width: auto;
    max-height: 100%;
    filter: drop-shadow(0px 0px 3px white);
  }
  #zz_logo img:hover {
    max-height: 100%;
  }
  .zz_nextpic,
  .zz_prevpic {
    width: 12vw;
    height: 8vw;
    font-size: 3rem;
  }
  .zz_prevpic {
    left: 1vw;
  }
  .zz_nextpic {
    right: 1vw;
  }
  #zz_hinten {
    grid-template-columns: 5px 0vw 4px 1fr 4px 0vw 5px;
    grid-template-rows: 8vh 16vh 10vh 5vh 1fr 5px;
    grid-template-areas: ".         spruch  spruch        spruch       spruch      spruch     ." ".         links   headeroben    headeroben   headeroben  rechts     ." ".         links   .             headermitte  .           rechts     ." ".         links   menue         menue        menue       rechts     ." ".         links   container     container    container   rechts     ." ".         links   footer        footer       footer      rechts     .";
  }
  .zz_mybox {
    flex-direction: column;
  }
  .zz_mybox .bild {
    display: grid;
    flex: 1;
    border-right: none;
  }
  .zz_mybox .bild img {
    max-width: 65%;
    max-height: 65%;
    border-radius: 0px;
    filter: drop-shadow(0 0 3px #161a1d);
  }
  .zz_mybox .bild img:hover {
    box-shadow: 0 0 1px 1px red;
    transform: scale(1.01);
  }
  .zz_mybox .bild :focus {
    outline: none;
  }
  .zz_mybox .bild a {
    display: grid;
  }
  .zz_mybox .bild a img {
    margin: auto;
  }
  .zz_mybox .text {
    display: flex;
    justify-content: space-between;
    flex: 2;
  }
  .zz_mybox .text p {
    color: #161a1d;
    font-size: 0.75rem;
    margin: auto;
    text-align: center;
  }
  .zz_mybox .text p img {
    width: 50%;
    height: auto;
    display: flex;
    margin: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
    box-shadow: 0px 0px 3px 3px #8a9da8;
    border: solid 1px #6c8493;
    border-radius: 6px;
    background-color: #a7b5be;
  }
  #zz_iconsleft {
    position: fixed;
    z-index: 9;
    left: 5px;
    width: calc(1.9 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    top: 8vh;
    height: 12vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 4px;
  }
  #zz_iconsleft div {
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #zz_iconsleft div img {
    width: 1rem;
    height: 1rem;
    margin-right: 4px;
  }
  #zz_iconsleft div span {
    font-family: "Poppins", sans-serif;
    font-weight: bolder;
    font-size: calc(0.15 * (8vh - 4px));
  }
  #zz_iconsleft div:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  #zz_iconsright {
    position: fixed;
    z-index: 9;
    right: 10px;
    width: calc(1.9 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    top: 8vh;
    height: 8vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
  }
  #zz_iconsright div {
    height: 100%;
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0;
  }
  #zz_iconsright div img {
    max-width: 1.5rem;
    max-height: 1.5rem;
    margin-right: 4px;
  }
  #zz_iconsright div span {
    font-family: "Poppins", sans-serif;
    font-weight: bolder;
    transform: scale(0.75);
    font-size: calc(0.15 * (8vh - 4px));
  }
  #zz_iconsright div p {
    font-size: calc(0.15 * (8vh - 4px));
  }
  #zz_iconsright div my_momentan {
    display: none;
    font-size: calc(0.5 * 0.15 * (8vh - 4px));
    line-height: 4;
    transform: translateY(-10px);
  }
  #zz_iconsright div my_family {
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    font-size: calc(0.75 * 0.15 * (8vh - 4px));
    padding: auto;
    padding-left: 1rem;
  }
  #zz_iconsright div:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  .zz_menuebutton {
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0 0.5rem 0;
    align-items: center;
  }
  .zz_menuebutton .bild img {
    max-height: 3.92vh;
    object-fit: contain;
    margin: 0 auto;
  }
  .zz_menuebutton .text {
    opacity: 1;
    visibility: visible;
  }
  .zz_menuebutton .text p {
    font-family: "Goldman", sans-serif;
    font-weight: normal;
    font-size: 75%;
    line-height: 1.4;
  }
  .zz_menuebutton:hover {
    box-shadow: inset 0 0 1px 1px blue, inset 0 0 1px 3px red;
  }
  .zz_header_links {
    display: none;
  }
  #icons {
    display: none;
  }
  .zz_tabelle {
    grid-gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(44vw, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(33vw, 1fr));
  }
  #zz_spruch {
    z-index: 9;
    grid-area: spruch;
    display: grid;
    justify-content: space-around;
    align-items: center;
  }
  #zz_spruch p {
    font-weight: normal;
    font-size: 1vh;
    color: #161a1d;
    letter-spacing: 3px;
    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white;
  }
  #zz_spruch my_font {
    font-size: 1.2vh;
    font-weight: 900;
    color: yellow;
    text-shadow: 0 0 1px #161a1d, 0 0 2px #161a1d, 0 0 3px #161a1d, 0 0 4px #161a1d;
    letter-spacing: 3px;
  }
  #zz_icons_oben_links {
    position: fixed;
    z-index: 9;
    left: 10px;
    width: calc(1.9 * (100vw - 5px - 5px - 0vw - 0vw - 8px) / 6);
    top: 8vh;
    height: 12vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
  }
  #zz_icons_oben_links #followText {
    position: absolute;
    left: 0;
    width: 100%;
    top: 10vh;
    height: 45%;
    display: grid;
    place-items: center;
    align-items: center;
    place-content: center;
    color: #161a1d;
    color: blue;
    font-size: 1.2vh;
    text-align: center;
    font-weight: bolder;
    text-shadow: 0px 0px 5px #e2e6e9, 0px 0px 5px #e2e6e9;
  }
  #zz_icons_oben_links #icons {
    border-radius: 0px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 5vh;
    height: 35%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 5px;
  }
  #zz_icons_oben_links #icons a img {
    max-height: 3.2vh;
    width: auto;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  #zz_header_mitte {
    grid-area: headermitte;
    height: 10vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 5px;
  }
  #zz_header_mitte h1 {
    font-family: Bruno Ace SC;
    font-size: 1.5vh;
    margin-bottom: 1rem;
    color: #161a1d;
  }
  #zz_header_mitte p {
    font-family: Bruno Ace SC;
    font-size: 1vh;
    font-weight: bolder;
  }
  #zz_header_mitte my_font {
    font-family: "Frijole";
    font-size: 1.5vh;
    margin: 0 4rem 0 4rem;
    position: relative;
  }
  #zz_header_mitte my_font::after {
    font-family: "BRUNO ACE SC";
    letter-spacing: 2rem;
    font-weight: bolder;
    content: "  Impressum  ";
    position: absolute;
    bottom: -40%;
    left: 48%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, #8a9da8 0%, #c4ced4 10px, #c4ced4 calc(100% - 10px), #8a9da8 100%);
    box-shadow: inset 0 0 1px 1px #161a1d;
    border-radius: 0px;
    color: #161a1d;
    color: red;
    padding: 5px;
    font-size: 1.5vh;
    white-space: pre;
    opacity: 0;
    visibility: hidden;
    transition: opacity 333ms ease-in-out;
  }
  #zz_header_mitte my_font:hover::after {
    opacity: 1;
    visibility: visible;
  }
  #fontbox {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 50px;
    width: 100%;
    margin-top: -3vh;
  }
  #fontbox div {
    animation: scale-in 333ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 1rem;
    height: 100%;
  }
}