/*
Theme Name: Fitzek
Theme URI: http://underscores.me/
Author: brotsalz
Author URI: http://www.brotsalz.de
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fitzek-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Fitzek is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* * Fonts
* --------------------------------------------- */
/* space-mono-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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fwback-wp/assets/fonts/space-mono/space-mono-v17-latin-regular.woff2')
    format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-mono-700 - 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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fwback-wp/assets/fonts/space-mono/space-mono-v17-latin-700.woff2')
    format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: Yoko;
  font-style: normal;
  font-weight: 500;
  src:
    url('../fwback-wp/assets/fonts/yoko/yoko.woff2') format('woff2'),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url('../fwback-wp/assets/fonts/yoko.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* * Utility
* --------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* added line */
}

/* * General
* --------------------------------------------- */
:root {
  --cBlack: #000000;
  --cWhite: #f7f2ea;
  --cRed: #ef1111;
  --cGreyDark: #838383;
  --cDark: #191818;

  --b-radius-sm: 5px;
  --b-radius-md: 8px;
  --b-radius-lg: 10px;
  --b-radius-xl: 15px;

  --fw-400: 400;
  --fw-700: 700;
}

html {
  box-sizing: border-box;
  /* scroll-behavior: smooth; */
  padding: 0;
  margin: 0;
  font-size: 100%;
}

body {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: var(--fw-400);
  color: var(--cWhite);
  background-color: var(--cBlack);
  font-size: 18px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family: Yoko, almaq-rough, sans-serif;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 1.5rem;
  line-height: 1.05;
  hyphens: auto;
}

h1,
.h1 {
  font-size: clamp(3.5rem, 6vw, 5rem);
}

h2,
.h2 {
  font-size: clamp(2.75rem, 5vw, 4rem);
}

h3,
.h3 {
  font-size: clamp(2.5rem, 4vw, 3rem);
  line-height: 1.1;
}

h4,
.h4 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
}

h5,
.h5 {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.25;
}

.f-sm {
  font-size: 16px;
}

p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.secInd {
  background: var(--cRed);
  color: var(--cBlack);
  padding: 0.25rem 0.5rem;
  font-weight: var(--fw-700);
  width: fit-content;
  position: relative;
  margin-inline: 25px;
  margin-bottom: 2.5rem;
}

.secInd::after,
.secInd::before {
  content: '';
  display: block;
  width: 25px;
  height: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.secInd::before {
  left: -25px;
  background-image: url('../fwback-wp/assets/imgs/fitzek-section-indicator-end-left.svg');
}

.secInd::after {
  right: -25px;
  background-image: url('../fwback-wp/assets/imgs/fitzek-section-indicator-end-right.svg');
}

.mobile-br br {
  display: none;
}

.bold_highlight strong {
  font-weight: initial;
  color: var(--cRed);
}

@media (max-width: 576px) {
  .mobile-no-br br {
    display: none;
  }

  .mobile-br br {
    display: inline;
  }
}

/* * Buttons ------------------ */
.cta :is(a, button) {
  transition: 0.3s all ease;
  display: block;
  width: fit-content;
  text-decoration: none;
}

.cta.bordered :is(a, button) {
  border: 2px solid var(--cRed);
  border-radius: var(--b-radius-lg);
  padding: 0.5rem 2rem;
  background: transparent;
  color: var(--cRed);
  font-weight: var(--fw-700);
}

.cta.bordered :is(a, button):hover {
  background: var(--cRed);
  color: var(--cBlack);
}

.cta.filled :is(a, button) {
  border: 2px solid var(--cRed);
  border-radius: var(--b-radius-lg);
  padding: 0.5rem 2rem;
  background: var(--cRed);
  color: var(--cBlack);
  font-weight: var(--fw-700);
}

.cta.filled :is(a, button):hover {
  background: var(--cWhite);
  border-color: var(--cWhite);
}

/* * Colors ------------------ */
.cRed {
  color: var(--cRed);
}

.cWhite {
  color: var(--cWhite);
}

.cBlack {
  color: var(--cBlack);
}

.cGreyDark {
  color: var(--cGreyDark);
}

.cDark {
  color: var(--cDark);
}

/* * Media Queries ------------------ */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1480px;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* * Footer
* --------------------------------------------- */
.footer-background {
  margin-bottom: -15%;
}

.footer_divider img {
  width: 100%;
  height: auto;
}

.footer_logo__wrapper {
  height: 100px;
}

.footer_law a {
  color: var(--cWhite);
  text-decoration: none;
}

.socials__wrapper {
  display: flex;
  gap: 1.5rem;
}

.socials__wrapper a {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s all ease;
  transform: scale(1);
}

.socials__wrapper a:hover {
  transform: scale(1.05);
}

.socials__wrapper a img {
  height: 2rem;
  width: auto;
}

.socials__wrapper.header a img {
  height: 1rem;
}

.socials__wrapper.footer a img {
  height: 3rem;
}

@media (max-width: 768px) {
  .footer-background {
    margin-bottom: -5%;
  }
}

/* * Newsletter ------------------ */
#newsletter {
  max-width: 550px;
}

#newsletter :is(input[type='email'], input[type='submit'], select) {
  height: 3rem;
  width: 100%;
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--cWhite);
  border-radius: var(--b-radius-lg);
  background: transparent;
  color: var(--cWhite);
}

#newsletter input[type='email']::placeholder {
  color: var(--cWhite);
}

#newsletter select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#newsletter input[type='submit'] {
  background: var(--cWhite);
  color: var(--cBlack);
  width: fit-content;
  padding-inline: 2.5rem;
  font-weight: var(--fw-700);
}

#newsletter label[for='dsgvo'] {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
}

#newsletter input[type='checkbox'] {
  margin-top: 0.3rem;
  max-width: 1.45rem;
  max-height: 1.45rem;
  min-width: 1.45rem;
  min-height: 1.45rem;
}

#newsletter label[for='dsgvo']::before {
  content: '';
  display: block;
  max-width: 1.5rem;
  max-height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border: 2px solid var(--cWhite);
  border-radius: var(--b-radius-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0.25rem;
  background: var(--cBlack);
}

#newsletter label[for='dsgvo'].checked::before {
  content: '✔';
}

/* * Hero
* --------------------------------------------- */
.hero-20-years {
  margin: 0;
}

.hero_svg {
  --svgSpeed: 6s;
  --svgEasing: ease-in;
  position: absolute;
  top: 8rem;
  left: 5%;
  width: 90%;
  height: auto;
  z-index: -1;
}

@media (max-width: 992px) {
  .hero_svg {
    left: -50%;
    width: 200%;
  }
}

.hero_svg svg {
  width: 100%;
  height: auto;
}

.hero_svg svg .hero_svg_group_1 path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawPath var(--svgSpeed) var(--svgEasing) forwards;
}

.hero_svg svg .hero_svg_group_2 path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawPath var(--svgSpeed) var(--svgEasing) 0.4s forwards;
}

.hero_svg svg .hero_svg_group_3 path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawPath var(--svgSpeed) var(--svgEasing) 0.8s forwards;
}

.hero_svg svg .hero_svg_group_4 path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawPath var(--svgSpeed) var(--svgEasing) 1.2s forwards;
}

/* * Preloader
* --------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  padding: 2.5rem;
  width: 100%;
  height: 100%;
  background: var(--cBlack);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  pointer-events: none;
  opacity: 1;
  animation: fadeOut 1s ease forwards;
}

#preloader svg {
  display: none;
}

#preloader svg path {
  stroke-dasharray: 3000;
  /* Adjust to match actual path length */
  stroke-dashoffset: 3000;
  animation: drawPath 1.5s ease forwards;
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes reverseDrawPath {
  to {
    stroke-dashoffset: 3000;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* * Shop Modal
* --------------------------------------------- */
#shopModal .modal-content {
  border: 1px solid var(--cRed);
  border-radius: var(--b-radius-lg);
  background-color: var(--cBlack);
  color: var(--cWhite);
}

#shopModal .modal-header {
  border-bottom: 1px solid var(--cRed);
}

#shopModal .modal-footer {
  border-top: 1px solid var(--cRed);
  padding: 0;
}

#shopModal .book-facts {
  font-weight: var(--fw-700);
  margin: 0;
  font-size: 16px;
}

#shopModal .book-type {
  border-right: 1px solid var(--cRed);
  padding: 0.25rem 1.5rem;
}

#shopModal .book-release-date {
  border-right: 1px solid var(--cRed);
  padding: 0.25rem 1.5rem;
}

#shopping-options {
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.shop_option {
  transition: 0.3s all ease;
  transform: scale(1);
}

.shop_option:hover {
  transform: scale(1.05);
}

.shop_option img {
  width: 100%;
  height: auto;
  /* filter: sepia(1) saturate(2) brightness(1.05) hue-rotate(10deg); */
}

#shopModal .close-icon {
  padding: 0rem;
  min-width: 5rem;
  min-height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-left: 1px solid var(--cRed);
  background: transparent;
}

@media (max-width: 768px) {
  #shopModalLabel {
    font-size: clamp(1rem, 4vw, 3rem);
    padding-top: 0.65rem !important;
  }

  #shopModal .close-icon {
    min-width: 3rem;
    min-height: 3rem;
    height: 100%;
  }

  #shopModal .close-icon svg {
    width: 70%;
  }

  #shopModal .book-facts {
    flex-direction: column;
    width: 100%;
  }

  #shopModal .book-type {
    border-right: none;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--cRed);
  }

  #shopModal .book-release-date {
    border: none;
    padding-inline: 1rem;
  }
}

@media (max-width: 576px) {
  #shopping-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* * Waldbühne
* --------------------------------------------- */
.waldbuehne_row {
  margin-bottom: -25%;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .waldbuehne_row {
    margin-bottom: -35%;
  }
}

/* * Password Protection
* --------------------------------------------- */
.post-password-form {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.post-password-form p {
  max-width: 600px;
  text-align: center;
}

.post-password-form input[type='password'] {
  height: 3rem;
  width: 100%;
  max-width: 300px;
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--cWhite);
  border-radius: var(--b-radius-lg);
  background: transparent;
  color: var(--cWhite);
}

.post-password-form input[type='submit'] {
  height: 3rem;
  width: 100%;
  max-width: 300px;
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--cWhite);
  border-radius: var(--b-radius-lg);
  background: transparent;
  color: var(--cWhite);
}

/* * Shopping Row
* --------------------------------------------- */
.shopping_row {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 2rem;
}

@media (max-width: 1200px) {
  .shopping_row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .shop_option {
    flex-basis: 25%;
  }
}

/* * Audible Section
* --------------------------------------------- */
#audible {
  margin-top: 23rem;
}

.audible_section_part_1 {
  margin-bottom: -38% !important;
  position: relative;
  z-index: 2;
}

@media (max-width: 5000px) {
  #audible {
    margin-top: 15rem;
  }

  .audible_section_part_1 {
    margin-bottom: -28% !important;
  }
}

@media (max-width: 2200px) {
  #audible {
    margin-top: 23rem;
  }
}

@media (max-width: 1920px) {
  #audible {
    margin-top: 10rem;
  }

  .audible_section_part_1 {
    margin-bottom: -42% !important;
  }
}

@media (max-width: 1600px) {
  .audible_section_part_1 {
    margin-bottom: -54% !important;
  }
}

@media (max-width: 1200px) {
  .audible_section_part_1 {
    margin-bottom: -58% !important;
  }
}

@media (max-width: 992px) {
  .audible_section_part_1 {
    margin-bottom: 3rem !important;
  }

  .audible_section_part_2 {
    display: none !important;
  }

  #audible {
    margin-top: 5rem;
  }
}

@media (max-width: 576px) {
  .audible_section_part_1 {
    margin-bottom: 0rem !important;
  }

  .audible_section_part_2 {
    display: none !important;
  }

  #audible {
    margin-top: 3rem;
  }
}

.fbr100 img {
  filter: brightness(100);
}