/*
 Theme Name:   bookstar.ch Child-Theme
 Theme URI:    https://www.bookstar.ch
 Description:  Child Theme for bookstar.ch
 Author:       Rob Schneider
 Author URI:   https://www.impulsis.ch
 Template:     bs4wpbt
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  imp-bookstar-child
*/

@import url("//hello.myfonts.net/count/335ac2");
@import url("//hello.myfonts.net/count/335f12");

@font-face {
  font-family: 'PhosphatePro-Solid';
  src: url('fonts/335F12_0_0.eot');
  src: url('fonts/335F12_0_0.eot?#iefix') format('embedded-opentype'),
    url('fonts/335F12_0_0.woff2') format('woff2'),
    url('fonts/335F12_0_0.woff') format('woff'),
    url('fonts/335F12_0_0.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/hinted-Roboto-LightItalic.eot');
  src: url('fonts/hinted-Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/hinted-Roboto-LightItalic.woff2') format('woff2'),
    url('fonts/hinted-Roboto-LightItalic.woff') format('woff'),
    url('fonts/hinted-Roboto-LightItalic.ttf') format('truetype'),
    url('fonts/hinted-Roboto-LightItalic.svg#Roboto-LightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/hinted-Roboto-Light.eot');
  src: url('fonts/hinted-Roboto-Light.eot?#iefix') format('embedded-opentype'),
    url('fonts/hinted-Roboto-Light.woff2') format('woff2'),
    url('fonts/hinted-Roboto-Light.woff') format('woff'),
    url('fonts/hinted-Roboto-Light.ttf') format('truetype'),
    url('fonts/hinted-Roboto-Light.svg#Roboto-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/hinted-Roboto-Medium.eot');
  src: url('fonts/hinted-Roboto-Medium.eot?#iefix') format('embedded-opentype'),
    url('fonts/hinted-Roboto-Medium.woff2') format('woff2'),
    url('fonts/hinted-Roboto-Medium.woff') format('woff'),
    url('fonts/hinted-Roboto-Medium.ttf') format('truetype'),
    url('fonts/hinted-Roboto-Medium.svg#Roboto-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/hinted-Roboto-MediumItalic.eot');
  src: url('fonts/hinted-Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/hinted-Roboto-MediumItalic.woff2') format('woff2'),
    url('fonts/hinted-Roboto-MediumItalic.woff') format('woff'),
    url('fonts/hinted-Roboto-MediumItalic.ttf') format('truetype'),
    url('fonts/hinted-Roboto-MediumItalic.svg#Roboto-MediumItalic') format('svg');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/hinted-Roboto-Regular.eot');
  src: url('fonts/hinted-Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/hinted-Roboto-Regular.woff2') format('woff2'),
    url('fonts/hinted-Roboto-Regular.woff') format('woff'),
    url('fonts/hinted-Roboto-Regular.ttf') format('truetype'),
    url('fonts/hinted-Roboto-Regular.svg#Roboto-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

:root {
  --main-color-red: #FA4344;
  --main-color-white: #FFFFFF;
  --main-color-yellow: #FFFA05;
  --main-color-black: #000000;
  --main-color-pink: #ffe6dd;

  --base-fontsize: 28px;
  --base-lineheight: 1.357;
  --base-letterspacing: 0.22px;

  --bold-fontsize: 28px;
  --bold-lineheight: 1.357;
  --bold-letterspacing: 0.28px;

  --small-fontsize: 22px;
  --small-lineheight: 1.363;
  --small-letterspacing: 0.44px;

  --footer-fontsize: 22px;
  --footer-lineheight: 1.363;
  --footer-letterspacing: 0.22px;

  --nav-font-size: clamp(22px, 28px, 28px);
  --nav-font-line-height: 1.321;
  --nav-font-letter-spacing: 0.56px;

  --h1-fontsize: 90px;
  --h1-line-height: 1.055;
  --h1-letter-spacing: 2.7px;
  --h1-margin: 45px 0 80px;

  --h2-fontsize: 50px;
  --h2-line-height: 1;
  --h2-letter-spacing: 1.5px;

  --body-margin: 150px 0 0 0;

  --page-padding: 0 59px;

  --header-width: 100%;
  --header-height: 150px;
  --brand-inner-maxwidth: 25vw;
  --nav-display: flex;
  --desktop-brand-display: block;
  --nav-padding: 0 59px;
  --nav-li-margin: 42px;
  --nav-dropdown-toggle-padding: 45px;
  --nav-dropdown-menu-padding: 5px 14px;
  --nav-dropdown-menu-margin: -14px;

  --mobile-nav-brand-display: none;
  --mobile-nav-brand-padding: 0;
  --mobile-nav-brand-inner-width: calc(100% - 58px);
  --mobile-nav-brand-inner-padding: 0;
  --mobile-nav-brand-btn-width: 38px;
  --mobile-nav-brand-btn-margin: 20px;

  --mobile-nav-mobilenav-padding: 23px 0 23px 30px;
  --mobile-nav-mobilenav-hr-width: calc(100% + 30px);
  --mobile-nav-mobilenav-hr-margin: 10px 0 10px -30px;

  --btn-border-radius: 50px;
  --btn-padding: 18px 47px;
  --btn-margin: 40px 0;

  --buch-margin: 30px;
  --buch-buchcover-padding: 40px 40px 0 40px;
  --buch-buchcover-img-boxshadow: 5px 5px 10px #00000033;
  --buch-mehrinfo-width: 66.66%;
  --buch-mehrinfo-flex-wrap: nowrap;
  --buch-meta-margin: 30px 0;
  --buch-kommentare-padding: 22px 0;
  --buch-bewertungstext-margin: 40px 0 30px;
  --buch-bewertungstext-img-width: 151px;
  --buch-post-ratings-margin: 45px;
  --buch-post-ratings-img-width: 25%;
  --buch-post-ratings-img-margin: 5px;
  --buch-open-buch-maxheight: 1300px;
  --buch-open-buch-margin: 30px;
  --buch-open-buch-buch-cover-wdith: 33.33%;
  --buch-open-buch-buchcontent-width: 50%;
  --buch-open-buch-buchcontent-padding: 40px;
  --buch-open-buch-buchcontent-height: 100%;
  --buch-open-buch-buchkommentare-closethisbig-top: 0px;
  --buch-open-buch-buchkommentare-closethisbig-right: 40px;
  --buch-open-buch-buchkommentare-closethisbig-fontsize: 48px;
  --buch-open-buch-buchkommentare-closethisbig-padding: 5px;
  --buch-open-buch-buchkommentare-h5-margin: 40px;
  --buch-open-buch-buchkommentare-comment-height: 280px;
  --buch-open-buch-buchkommentare-comment-padding: 10px;
  --buch-open-buch-buchkommentare-formsubmit-margin: 68px;
  --buch-open-buch-buchkommentare-comment-submit-padding: 10px 20px;
  --buch-open-buch-buchkommentare-commentsarea-ul-margin: 20px 0 0;
  --buch-open-buch-buchkommentare-commentsarea-ul-li-padding: 15px 0 20px;
  --buch-open-buch-buchkommentare-commentsarea-ul-mediabody-padding: 0 20px;
  --buch-open-buch-buchkommentare-commentsarea-ul-mediabody-p-margin: 5px;
  --buch-open-buch-buchkommentare-loggedinas-padding: 0 20px;

  --page-template-default-h1-margin: 45px 0;

  --content-post-hr-height: 33px;
  --content-post-hr-width: 9999px;
  --content-post-hr-margin: 73px 0 73px -3333px;
  --content-post-hrshort-width: 151px;
  --content-post-hrshort-margin: 73px auto;
  --content-post-wppostgallery-margin: 0 -31% 60px;

  --page-wettbewerb-h1-margin: 40px;
  --page-wettbewerb-h2-margin: 80px;
  --page-wettbewerb-p-margin: 60px;

  --page-event-h3-margin: 20px;
  --page-event-anmeldung-margin: 0 -31%;
  --page-event-anmeldung-padding: 10px 300px 60px;
  --page-event-anmeldung-before-margin: -22% 0 0;
  --page-event-anmeldung-before-widthheight: 398px;
  --page-event-anmeldung-before-display: block;

  --afform-affield-margin: 50px;
  --afform-affield-afinput-padding: 20px;
  --afform-affieldtypecheckbox-before-margin: 0 0 0 -17%;
  --afform-affieldtypecheckbox-before-width: 174px;
  --afform-affieldtypecheckbox-before-height: 184px;
  --afform-affieldtypecheckbox-afinput-label-input-widthheight: 30px;
  --afform-affieldtypecheckbox-afinput-label-input-margin: 0 10px 10px 0;

  --page-einloggen-wpblockgroup-padding: 50px 0;
  --page-einloggen-wpblockgroup-div-p-padding: 0 300px;

  --registrieren-wrap-formsubmit-before-width: 138px;
  --registrieren-wrap-formsubmit-before-height: 132px;
  --registrieren-wrap-formsubmit-before-margin: -30px 0 0 240px;

  --einloggen-wrap-margin: 40px;
  --einloggen-wrap-wppbuserforms-before-width: 218px;
  --einloggen-wrap-wppbuserforms-before-height: 234px;
  --einloggen-wrap-wppbuserforms-before-margin: 60px 0 0 33px;
  --einloggen-wrap-wppbuserforms-after-margin: 400px 71px 0 0;
  --einloggen-wrap-login-remember-width: 50%;

  --backtotop-a-padding: 80px 0 60px;
  --backtotop-img-width: 65px;

  --footer-height: 108px;
  --footer-padding: 0 74px;
  --footer-copyright-textalign: left;
  --footer-social-textalign: center;
  --footer-datenschutz-textalign: right;
  --footer-datenschutz-justifycontent: flex-end;
  --footer-social-img-width: 44px;
  --footer-social-a-margin: 0 11px 0;

  --event-slider-carousel-caption-top: 210px;
  --event-slider-carousel-caption-img-width: 250px;
  --event-slider-carousel-caption-btn-margin: 40px;
  --event-slider-carousel-caption-width: 60%;
}

/* Colors */
.has-color-red-color {
  color: var(--main-color-red);
}

.has-color-white-color {
  color: var(--main-color-white);
}

.has-color-yellow-color {
  color: var(--main-color-yellow);
}

.has-color-black-color {
  color: var(--main-color-black);
}

.has-color-pink-color {
  color: var(--main-color-pink);
}

/* Background Colors */
.has-color-red-background-color {
  background-color: var(--main-color-red);
}

.has-color-white-background-color {
  background-color: var(--main-color-white);
}

.has-color-yellow-background-color {
  background-color: var(--main-color-yellow);
}

.has-color-black-background-color {
  background-color: var(--main-color-black);
}

.has-color-pink-background-color {
  background-color: var(--main-color-pink);
}

/* Body */
body {
  width: 100%;
  margin: var(--body-margin);
  padding: 0;
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  font-size: var(--base-fontsize);
  line-height: var(--base-lineheight);
  letter-spacing: var(--base-letterspacing);
  overflow-x: hidden !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5 {
  font-family: 'PhosphatePro-Solid';
  hyphens: auto;
}

h1 {
  font-size: var(--h1-fontsize);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--main-color-red);
}

h2 {
  font-size: var(--h2-fontsize);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

h3 {
  font-size: var(--h2-fontsize);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

strong {
  font-weight: 500;
}

/* Hyperlinks */
a {
  color: var(--main-color-black);
  text-decoration: underline;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
}

a:hover {
  color: var(--main-color-black);
}

mark {
  background: transparent;
}

/* Header */
.header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: var(--header-width);
  max-width: 100%;
  padding: var(--nav-padding);
  height: var(--header-height);
  background-color: var(--main-color-red);
  position: fixed;
  top: 0;
  z-index: 99;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
  box-shadow: 5px 5px 10px #A000004A;
}

/* Navigation */
.navigation {
  width: 37.5%;
  height: 100%;
  display: var(--nav-display);
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links {
  justify-content: flex-start;
}

.nav-links > li {
  text-align: left;
  margin-right: var(--nav-li-margin);
}

.nav-rechts {
  justify-content: flex-end;
}

.nav-rechts > li {
  text-align: right;
  width: max-content;
  margin-left: var(--nav-li-margin);
}

.navigation li a {
  text-align: center;
  font-family: var(--head-font-family);
  color: var(--main-color-white);
  font-size: var(--nav-font-size);
  line-height: var(--nav-font-line-height);
  font-weight: 500;
  letter-spacing: var(--nav-font-letter-spacing);
  text-decoration: none;
  border: none;
  text-transform: uppercase;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
}

.navigation li a.active {
  color: var(--main-color-yellow);
}

.navigation li a:hover {
  color: var(--main-color-yellow);
}

.navigation li.current-menu-item a {
  color: var(--main-color-yellow);
}

.navigation .dropdown-toggle,
.menu-item-loginout,
.menu-item-profile {
  padding-right: var(--nav-dropdown-toggle-padding);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 75' class='meinkonto'%3e%3cdefs%3e%3cfilter id='a' width='100%25' height='100%25' x='0' y='0' filterUnits='userSpaceOnUse'%3e%3cfeOffset dx='5' dy='5'/%3e%3cfeGaussianBlur result='blur' stdDeviation='5'/%3e%3cfeFlood flood-opacity='.161'/%3e%3cfeComposite in2='blur' operator='in'/%3e%3cfeComposite in='SourceGraphic'/%3e%3c/filter%3e%3c/defs%3e%3cg data-name='Gruppe 676'%3e%3cg filter='url(%23a)'%3e%3ccircle cx='22.5' cy='22.5' r='22.5' fill='white' data-name='Ellipse 18' transform='translate(10 10)'/%3e%3c/g%3e%3cg class='meinkonto-inner' fill='none' stroke='%23fa4344' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' data-name='Icon feather-user'%3e%3cpath d='M43.621 44.511v-2.669a5.338 5.338 0 0 0-5.338-5.338H27.606a5.338 5.338 0 0 0-5.338 5.338v2.669' data-name='Pfad 175'/%3e%3cpath d='M38.282 25.827a5.338 5.338 0 1 1-5.338-5.338 5.338 5.338 0 0 1 5.338 5.338Z' data-name='Pfad 176'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: var(--nav-dropdown-toggle-padding);
}

.menu-item-loginout {
  padding-right: var(--nav-dropdown-toggle-padding);
}

.navigation .dropdown-toggle:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 75' class='meinkonto'%3e%3cdefs%3e%3cfilter id='a' width='100%25' height='100%25' x='0' y='0' filterUnits='userSpaceOnUse'%3e%3cfeOffset dx='5' dy='5'/%3e%3cfeGaussianBlur result='blur' stdDeviation='5'/%3e%3cfeFlood flood-opacity='.161'/%3e%3cfeComposite in2='blur' operator='in'/%3e%3cfeComposite in='SourceGraphic'/%3e%3c/filter%3e%3c/defs%3e%3cg data-name='Gruppe 676'%3e%3cg filter='url(%23a)'%3e%3ccircle cx='22.5' cy='22.5' r='22.5' fill='%23FFFA05' data-name='Ellipse 18' transform='translate(10 10)'/%3e%3c/g%3e%3cg class='meinkonto-inner' fill='none' stroke='%23fa4344' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' data-name='Icon feather-user'%3e%3cpath d='M43.621 44.511v-2.669a5.338 5.338 0 0 0-5.338-5.338H27.606a5.338 5.338 0 0 0-5.338 5.338v2.669' data-name='Pfad 175'/%3e%3cpath d='M38.282 25.827a5.338 5.338 0 1 1-5.338-5.338 5.338 5.338 0 0 1 5.338 5.338Z' data-name='Pfad 176'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.navigation .dropdown-toggle:after {
  border:none;
}

.navigation .dropdown-menu {
  color: var(--main-color-white);
  border-radius: 0;
  background-color: var(--main-color-red);
  box-shadow: none;
  border: none;
  padding: var(--nav-dropdown-menu-padding);
  z-index: 99;
}

.navigation .dropdown-menu li {
  display: block;
  width: 100%;
}

.navigation .dropdown-menu a {
  color: var(--main-color-white);
  text-transform: uppercase;
  font-size: var(--nav-font-size);
  line-height: var(--nav-font-line-height);
  letter-spacing: var(--nav-font-letter-spacing);
  font-weight: 500;
  background-color: var(--main-color-red);
}

.navigation .dropdown-menu a:hover {
  background-color: var(--main-color-red);
  color: var(--main-color-yellow);
}

.desktop-brand {
  display: var(--desktop-brand-display);
  width: var(--brand-inner-maxwidth);
  margin: 0;
}

.desktop-brand svg {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Mobile Menu */
.mobile-brand {
  display: var(--mobile-nav-brand-display);
  padding: var(--mobile-nav-brand-padding);
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: normal;
}

.mobile-brand .brand-inner {
  margin: 0;
  padding: var(--mobile-nav-brand-inner-padding);
  width: var(--mobile-nav-brand-inner-width);
  height: auto;
}

.mobile-navi-btn {
  width: var(--mobile-nav-brand-btn-width);
  height: auto;
  margin-left: var(--mobile-nav-brand-btn-margin);
}

.mobile-navi-schliessen {
  z-index: 999;
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  width: 25px;
  height: auto;
  margin: 28px 26px 0 0;
  border: none;
}

.mobile-navigation {
  width: 100%;
  top: 0;
  left: 0;
  padding-left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-100vh);
  -moz-transform: translateY(-100vh);
  -o-transform: translateY(-100vh);
  transform: translateY(-100vh);
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: auto;
  background-color: var(--weiss-color);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.mobile-navigation::-webkit-scrollbar {
  /* WebKit */
  width: 0;
  height: 0;
  z-index: 999;
}

.mobile-navigation.scroll {
  box-shadow: var(--header-scroll-boxshadow);
}

.mobile-navigation.open {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-navigation .mobilenav {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--mobile-nav-mobilenav-padding);
  list-style: none;
  -webkit-transition: all 300ms ease-in-out 0s;
  -moz-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
  background-color: var(--main-color-red);
}

.mobile-navigation .mobilenav hr {
  width: var(--mobile-nav-mobilenav-hr-width);
  margin: var(--mobile-nav-mobilenav-hr-margin);
  height: 3px;
  background-color: var(--main-color-white);
}

.mobile-navigation .mobilenav .menu-item {
  width: 100%;
  margin: 0;
  padding: 0;
}

.mobile-navigation .mobilenav>.menu-item a {
  display: block;
  border: none;
  font-size: var(--nav-font-size);
  line-height: var(--nav-font-line-height);
  letter-spacing: var(--nav-font-letter-spacing);
  color: var(--main-color-white);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-navigation .mobilenav .menu-item>a:hover {
  text-decoration: none;
}

.mobile-navigation .mobilenav .current-menu-item a {
  color: var(--main-color-yellow);
}

/* Buttons */
.btn,
.wp-block-button__link {
  background-color: var(--main-color-red);
  font-weight: 500;
  text-align: center;
  border-radius: var(--btn-border-radius);
  text-transform: uppercase;
  font-size: var(--base-fontsize);
  line-height: 1.321;
  letter-spacing: 0.56px;
  padding: var(--btn-padding);
  margin: var(--btn-margin);
  text-decoration: none !important;
}

.btn:hover,
.wp-block-button__link:hover {
  color: var(--main-color-white);
  background-color: var(--main-color-black);
}

/* Buecher */
.buchliste {
  padding: var(--page-padding);
}

.buch {
  background-color: var(--main-color-white);
  margin-bottom: var(--buch-margin);
}

.buch .buchcover {
  aspect-ratio: 1 / 1.587;
  width: 100%;
  margin: 0;
  padding: var(--buch-buchcover-padding);
  text-align: center;
}

.buch .buchcover .buchcov {
  display: block;
  cursor: pointer;
}

.buch .buchcover .buchcov-mobile {
  display: none;
}

.buch .buchcover img {
  object-fit: cover;
  aspect-ratio: 1 / 1.587;
  z-index: 50;
  box-shadow: var(--buch-buchcover-img-boxshadow);
  overflow: hidden;
}

.buch .buchcover .btn-buch,
.buch .buchcover .btn-buch-mobile {
  background-color: var(--main-color-red);
  color: var(--main-color-white);
}

.buch .buchcover .btn-buch:hover,
.buch .buchcover .btn-buch-mobile:hover {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
}

.buch .buchcover .btn-buch {
  display: inline-block;
}

.buch .buchcover .btn-buch-mobile {
  display: none;
}

.buch .buchuntertitel {
  margin: 0;
  letter-spacing: 0.28px;
}

.buch .buchcontent .mehr,
.buch .buchcontent .mobilemehr {
  display: inline;
  color: var(--main-color-black);
}

.buch .mehrinfo {
  display: none;
  width: var(--buch-mehrinfo-width);
}

.buch .meta {
  display: none;
  list-style: none;
  margin: var(--buch-meta-margin);
  padding: 0;
  font-family: 'Roboto';
  font-weight: 300;
  text-align: left;
  font-size: var(--small-fontsize);
  line-height: var(--small-lineheight);
  letter-spacing: var(--small-letterspacing);
}

.buch .buchcontent .sternli {
  padding-left: 0;
}

.bewertungstext {
  text-align: center;
  display: block;
  font-family: 'PhosphatePro-Solid';
  font-weight: 500;
  font-size: var(--h2-fontsize);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: uppercase;
  color: var(--main-color-red);
  margin: var(--buch-bewertungstext-margin);
}

.bewertungstext:before {
  background-image: url('img/sterne_vier_klein.png');
}

.bewertungstext a,
.bewertungstext a:hover {
  color: red;
}

.bewertungstext img {
  width: var(--buch-bewertungstext-img-width);
  height: auto;
}

.post-ratings {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  margin-bottom: var(--buch-post-ratings-margin);
}

.post-ratings img {
  width: var(--buch-post-ratings-img-width);
  height: auto;
  margin-right: var(--buch-post-ratings-img-margin);
}

.post-ratings img:last-child {
  margin-right: 0;
}

.post-ratings {
  text-indent:
}

.loginsternli {
  margin-bottom: var(--buch-post-ratings-margin);
}

.buch .buchfulltext p {
  margin-bottom: 60px;
}

.buch .kommentare {
  text-align: center;
  width: 100%;
  padding: var(--buch-kommentare-padding);
  background-color: var(--main-color-pink);
  font-size: var(--small-fontsize);
  line-height: var(--small-lineheight);
  letter-spacing: var(--small-letterspacing);
  color: var(--main-color-red);
}

.buch .buchcontent {
  width: 100%;
  padding-right: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.buch-open .buch {
  width: 100%;
  max-height: var(--buch-open-buch-maxheight);
  background-color: var(--main-color-white);
  margin-bottom: var(--buch-open-buch-margin);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.buch-open .buch .mehrinfo {
  display: flex !important;
  flex-direction: row;
  flex-wrap: var(--buch-mehrinfo-flex-wrap);
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.buch-open .buch .buchcover {
  width: var(--buch-open-buch-buch-cover-wdith);
  background-color: #DBDBDB;
}

.buch-open .buch .buchcontent {
  width: var(--buch-open-buch-buchcontent-width);
  height: var(--buch-open-buch-buchcontent-height);
  display: block;
  padding-right: var(--buch-open-buch-buchcontent-padding);
  padding-left: var(--buch-open-buch-buchcontent-padding);
}

.buch-open .buch .meta {
  display: block;
}

.buch-open .buch .buchkommentare {
  margin-top: 0;
  padding: 0 0 40px 0;
  color: var(--main-color-red);
  width: var(--buch-open-buch-buchcontent-width);
  background-color: var(--main-color-pink);
  height: 100%;
  display: block;
  overflow-y: auto;
  font-size: var(--base-fontsize);
  line-height: var(--base-lineheight);
  letter-spacing: var(--base-letterspacing);
}

.buch-open .buch .buchkommentare .closethisbig {
  color: var(--main-color-red);
  position: absolute;
  top: var(--buch-open-buch-buchkommentare-closethisbig-top);
  right: var(--buch-open-buch-buchkommentare-closethisbig-right);
  display: block;
  padding: var(--buch-open-buch-buchkommentare-closethisbig-padding);
  font-size: var(--buch-open-buch-buchkommentare-closethisbig-fontsize);
  font-weight: 600;
  text-decoration: none;
}

.buch-open .buch .buchkommentare .must-log-in {
  padding: var(--buch-open-buch-buchkommentare-commentsarea-ul-mediabody-padding);
}

.buch-open .buch .buchkommentare .closethisbig:hover {
  text-decoration: none;
}

.buch-open .buch .buchkommentare a {
  color: var(--main-color-red);
}

.buch-open .buch .buchkommentare h5 {
  color: var(--main-color-red);
  font-family: 'Roboto';
  text-transform: none;
  font-weight: normal;
  font-size: var(--small-fontsize);
  line-height: var(--small-lineheight);
  letter-spacing: var(--small-letterspacing);
  text-align: center;
  margin-top: var(--buch-open-buch-buchkommentare-h5-margin);
}

.buch-open .buch .buchkommentare .kommentarabgeben {
  font-weight: 500;
  color: var(--main-color-white);
}

.buch-open .buch .buchkommentare .comment-respond #comment {
  width: 100%;
  height: var(--buch-open-buch-buchkommentare-comment-height);
  color: var(--main-color-red);
  padding: var(--buch-open-buch-buchkommentare-comment-padding);
  border: 4px solid var(--main-color-red);
}

.buch-open .buch .buchkommentare .form-submit {
  text-align: center;
  margin-bottom: var(--buch-open-buch-buchkommentare-formsubmit-margin);
}

.buch-open .buch .buchkommentare .comment-respond .submit {
  color: var(--main-color-white);
  background-color: var(--main-color-red);
  font-size: var(--small-fontsize);
  border-radius: var(--btn-border-radius);
  padding: var(--buch-open-buch-buchkommentare-comment-submit-padding);
  border: none;
}

.buch-open .buch .buchkommentare .comments-area ul {
  list-style: none;
  margin: var(--buch-open-buch-buchkommentare-commentsarea-ul-margin);
  padding: 0;
}

.buch-open .buch .buchkommentare .comments-area ul li {
  border-top: 4px solid var(--main-color-red);
  padding: var(--buch-open-buch-buchkommentare-commentsarea-ul-li-padding);
  margin-top: 0;
}

.buch-open .buch .buchkommentare .comments-area ul li:last-child {
  border-bottom: none;
}

.buch-open .buch .buchkommentare .comments-area ul .media-body {
  padding: var(--buch-open-buch-buchkommentare-commentsarea-ul-mediabody-padding);
}

.buch-open .buch .buchkommentare .comments-area ul .media-body p {
  margin-bottom: var(--buch-open-buch-buchkommentare-commentsarea-ul-mediabody-p-margin);
}

.buch-open .buch .buchkommentare .comments-area ul .media-heading {
  font-family: 'Roboto';
  color: var(--main-color-red);
  font-weight: 500;
  font-size: var(--base-fontsize);
  line-height: var(--base-lineheight);
  letter-spacing: var(--base-letterspacing);
}

.buch-open .buch .buchkommentare .comment-reply-title {
  margin-top: 0;
  margin-bottom: 0;
}

.buch-open .buch .buchkommentare .comment-respond>.comment-reply-title {
  display: none;
}

.buch-open .buch .buchkommentare .logged-in-as {
  padding: var(--buch-open-buch-buchkommentare-loggedinas-padding);
  font-size: var(--small-fontsize);
}

.buch-open .buch .buchkommentare .comment-form-comment label {
  display: none;
}

.buch-open .buch .kommentar {
  display: none;
}

/* Buch Single */
.single-books h1 {
  text-align: center;
  margin: 30px 0;
  padding-left: 24px;
  padding-right: 24px;
}

.buch-single .buchcover {
  padding: 24px 24px 15px;
  background-color: #DBDBDB;
}

.buch-single .buchcover .meta {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  font-family: 'Roboto';
  font-weight: 300;
  text-align: left;
  font-size: var(--small-fontsize);
  line-height: var(--small-lineheight);
  letter-spacing: var(--small-letterspacing);
}

.buch-single .buchcontent {
  padding: 15px 24px;
}

.buch-single .buchcontent .buchuntertitel {
  margin-bottom: 0;
}

.buch-single .buchcontent .bewertungstext {
  font-size: 26px;
}

.buch-single .buchcontent .bewertungstext img {
  height: 23px;
  width: auto;
}

.buch-single .buchcontent .sternli .post-ratings {
  width: 100%;
}

.buch-single .buchcontent .sternli .post-ratings img {
  margin: 0;
}

.buch-single .buchkommentare {
  background-color: var(--main-color-pink);
  padding: 15px 0;
}

.buch-single .buchkommentare h5 {
  color: var(--main-color-red);
  font-family: 'Roboto';
  text-transform: none;
  font-weight: normal;
  font-size: var(--small-fontsize);
  line-height: var(--small-lineheight);
  letter-spacing: var(--small-letterspacing);
  text-align: center;
}

.buch-single .buchkommentare .comment-reply-title {
  display: none;
}

.buch-single .buchkommentare .logged-in-as {
  padding: 0 24px;
  margin-bottom: 15px;
}

.buch-single .buchkommentare .comment-form-comment label {
  display: none;
}

.buch-single .buchkommentare .comment-form-comment textarea {
  width: 100%;
  padding: 0;
  border: 3px solid var(--main-color-red);
}

.buch-single .buchkommentare .comment-form .form-submit {
  margin: 30px 0;
}

.buch-single .buchkommentare .buchkommentarliste ul {
  margin: 0;
  padding: 0;
}

.buch-single .buchkommentare .buchkommentarliste ul li {
  border-top: 3px solid var(--main-color-red);
  padding: 15px 24px 24px;
  color: var(--main-color-red);
}

.buch-single .buchkommentare .comments-area ul li .media-heading {
  margin-bottom: 0;
  font-family: 'Roboto';
  color: var(--main-color-red);
  font-weight: 500;
  font-size: var(--base-fontsize);
  line-height: var(--base-lineheight);
  letter-spacing: var(--base-letterspacing);
}

.buch-single .buchkommentare .comments-area ul li p {
  margin-bottom: 0;
}

.buch-single .buchkommentare .comments-area ul li p:not(:first-of-type) {
  margin-bottom: 15px;
}

.buch-single .buchkommentare .comments-area ul li .reply {
  display: none;
}

.single-books .pagenav {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: normal;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.single-books .pagenav a[rel='prev'],
.single-books .pagenav a[rel='next'] {
  width: 37px;
  height: 37px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-white);
  box-shadow: 5px 5px 10px #00000029;
}

.single-books .pagenav a[rel='prev'] {
  margin-left: 12px;
}

.single-books .pagenav a[rel='prev'] svg {
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.single-books .pagenav a[rel='next'] {
  margin-right: 12px;
}

.single-books .pagenav a[rel='next'] svg {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* Page content */

.page-template-default h1 {
  margin: var(--page-template-default-h1-margin);
}

.page-template-page-buecher h1 {
  margin: var(--h1-margin);
}

.content .post hr {
  background-image: url('img/hr-stern@2x.png');
  background-repeat: repeat-x;
  background-size: contain;
  height: var(--content-post-hr-height);
  width: var(--content-post-hr-width);
  margin: var(--content-post-hr-margin);
  border: none;
}

.content .post hr.short {
  background-image: url('img/sterne_vier_klein@2x.png');
  background-repeat: no-repeat;
  width: var(--content-post-hrshort-width);
  margin: var(--content-post-hrshort-margin);
}

.content .post .wp-block-gallery {
  max-width: 100%
  margin: var(--content-post-wppostgallery-margin);
}

/* Page Wettbewerb */

.page-wettbewerb h1 {
  color: var(--main-color-red);
  margin-bottom: var(--page-wettbewerb-h1-margin);
}

.page-wettbewerb h2 {
  color: var(--main-color-red);
  margin-bottom: var(--page-wettbewerb-h2-margin);
}

.page-wettbewerb h3 {
  color: var(--main-color-yellow);
  margin-bottom: var(--page-wettbewerb-h2-margin);
}

.page-wettbewerb .main-content p {
  margin-bottom: var(--page-wettbewerb-p-margin);
}

/* Page Event */

.page-event h1 {
  color: var(--main-color-yellow);
  margin-bottom: var(--page-wettbewerb-h1-margin);
}

.page-event h2 {
  color: var(--main-color-yellow);
  margin-bottom: var(--page-wettbewerb-h2-margin);
}

.page-event h3 {
  color: var(--main-color-yellow);
  margin-bottom: var(--page-event-h3-margin);
}

.page-event .wp-block-button__link {
  background-color: var(--main-color-white);
  color: var(--main-color-red);
}

.page-event .wp-block-button__link:hover {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
}

.page-event #event-anmeldung {
  margin: var(--page-event-anmeldung-margin);
  background-color: var(--main-color-white);
  padding: var(--page-event-anmeldung-padding);
  overflow: visible;
  position: relative;
}

.page-event #event-anmeldung::before {
  display: var(--page-event-anmeldung-before-display);
  position: absolute;
  top: 0;
  right: 0;
  margin: var(--page-event-anmeldung-before-margin);
  content: ' ';
  background-image: url('img/stern_buch@2x.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: var(--page-event-anmeldung-before-widthheight);
  height: var(--page-event-anmeldung-before-widthheight);
}

.af-form h1 {
  color: var(--main-color-red);
  text-align: center;
}

.wppb-user-forms ul li {
    padding-bottom: 0 !important;
}

.wppb-user-forms > p {
  text-align: center;
}

.af-form .af-field {
  border: none !important;
  margin-bottom: var(--afform-affield-margin) !important;
  padding: 0 !important;
}

.af-form .af-field .af-label {
  margin-bottom: 0;
}

.af-form .af-field .af-label label {
  float: none !important;
  width: 100% !important;
  text-transform: uppercase;
  color: var(--main-color-red);
  font-weight: 500;
}

.af-form .af-field .af-input input[type='email'],
.af-form .af-field .af-input input[type='text'],
.af-form .af-field .af-input input[type='number'],
.af-form .af-field .af-input input[type='password'] {
  float: none !important;
  width: 100% !important;
  border: 4px solid var(--main-color-red) !important;
  padding: var(--afform-affield-afinput-padding) !important;
}

.af-form .af-field-type-checkbox .acf-label {
  display: none;
}

.af-form .af-field-type-checkbox {
  position: relative;
}

.af-form .af-field-type-checkbox::before {
  display: var(--page-event-anmeldung-before-display);
  position: absolute;
  left: 0;
  top: 0;
  margin: var(--afform-affieldtypecheckbox-before-margin);
  content: ' ';
  background-image: url('img/stern_solo2@2x.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: var(--afform-affieldtypecheckbox-before-width);
  height: var(--afform-affieldtypecheckbox-before-height);

}

.af-form .af-field-type-checkbox .af-input label {
  font-size: var(--base-fontsize);
  line-height: var(--base-lineheight);
  letter-spacing: var(--base-letterspacing);
  color: var(--main-color-red);
  hyphens: auto;
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.af-form .af-field-type-checkbox .af-input label input {
  width: var(--afform-affieldtypecheckbox-afinput-label-input-widthheight);
  height: var(--afform-affieldtypecheckbox-afinput-label-input-widthheight);
  margin: var(--afform-affieldtypecheckbox-afinput-label-input-margin);
  border: 4px solid var(--main-color-red) !important;
}

.af-form .af-field-type-checkbox .af-input label .checkmark {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: var(--main-color-white);
  border: 3px solid var(--main-color-red);
}

/* On mouse-over, add a grey background color */
.af-form .af-field-type-checkbox .af-input label:hover ~ .checkmark {
  background-color: var(--main-color-white);
}

/* When the checkbox is checked, add a blue background */
.af-form .af-field-type-checkbox .af-input label input:checked ~ .checkmark {
  background-color: var(--main-color-white);
}

/* Create the checkmark/indicator (hidden when not checked) */
.af-form .af-field-type-checkbox .af-input label .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.af-form .af-field-type-checkbox .af-input label input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.af-form .af-field-type-checkbox .af-input label .checkmark:after {
  left: 7px;
  top: 3px;
  width: 10px;
  height: 15px;
  border: solid var(--main-color-red);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.af-form .af-submit {
  display: block;
  text-align: center;
  position: relative;
}

.af-form .af-submit .af-submit-button {
  background-color: var(--main-color-red);
  font-weight: 500;
  text-align: center;
  border-radius: var(--btn-border-radius);
  text-transform: uppercase;
  font-size: var(--base-fontsize);
  line-height: 1.321;
  letter-spacing: 0.56px;
  padding: var(--btn-padding);
  text-decoration: none !important;
  border: none;
  color: var(--main-color-white);
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
}

.af-form .af-submit .af-submit-button:hover {
  background-color: var(--main-color-black);
}

/* Page Archiv */

.page-archiv h1 {
  color: var(--main-color-yellow);
}

.page-archiv h2 {
  color: var(--main-color-yellow);
}

.page-archiv h3 a {
  color: var(--main-color-yellow);
  font-size: var(--h1-fontsize);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-decoration: none;
}

/* Page Über uns */

.page-ueber-uns h1 {
  color: var(--main-color-white);
}

.page-ueber-uns p,
.page-ueber-uns a {
  color: var(--main-color-white);
}

.page-ueber-uns .main-content a[href^="mailto:"] {
  color: var(--main-color-red);
}

/* Page Preis */
.page-preis h1 {
  color: var(--main-color-white);
  margin-bottom: var(--page-wettbewerb-h2-margin);
}

.page-preis h2 {
  color: var(--main-color-white);
  margin-bottom: var(--page-wettbewerb-p-margin);
}

/* Login / Register */
.page-einloggen h1,
.page-registrieren h1,
.page-profil-bearbeiten h1 {
  margin-bottom: var(--page-wettbewerb-p-margin);
}

.einloggen-wrap,
.registrieren-wrap,
.page-profil-bearbeiten .wp-block-group {
  padding: var(--page-einloggen-wpblockgroup-padding);
}

.page-einloggen .wp-block-group > div > p,
.page-registrieren .wp-block-group > div > p {
  margin: var(--page-einloggen-wpblockgroup-div-p-padding);
}

.wppb-user-forms {
  width: 100%;
  padding: var(--page-einloggen-wpblockgroup-div-p-padding);
}

.wppb-user-forms ul {
  width: 100% !important;
  max-width: 100% !important;
}

.wppb-form-field {
  margin-bottom: var(--afform-affield-margin) !important;
}

.wppb-form-field label {
  float: none !important;
  width: 100% !important;
  text-transform: uppercase;
  color: var(--main-color-red);
  font-weight: 500;
}

.wppb-form-field input[type='email'],
.wppb-form-field input[type='text'],
.wppb-form-field input[type='password'] {
  float: none !important;
  width: 100% !important;
  border: 4px solid var(--main-color-red) !important;
  padding: var(--afform-affield-afinput-padding) !important;
}

.wppb-toggle-pw {
  display: none !important;
}

.login-remember {
  width: var(--einloggen-wrap-login-remember-width);
}

.login-remember {
  position: relative;
}

.login-remember label {
  font-size: var(--base-fontsize);
  line-height: var(--base-lineheight);
  letter-spacing: var(--base-letterspacing);
  color: var(--main-color-red);
  hyphens: auto;
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.login-remember input[type='checkbox'] {
  width: var(--afform-affieldtypecheckbox-afinput-label-input-widthheight);
  height: var(--afform-affieldtypecheckbox-afinput-label-input-widthheight);
  margin: var(--afform-affieldtypecheckbox-afinput-label-input-margin);
  border: 4px solid var(--main-color-red) !important;
}

.login-remember input[type='checkbox'] label .checkmark {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: var(--main-color-white);
  border: 3px solid var(--main-color-red);
}

/* On mouse-over, add a grey background color */
.login-remember input[type='checkbox'] label:hover ~ .checkmark {
  background-color: var(--main-color-white);
}

/* When the checkbox is checked, add a blue background */
.login-remember input[type='checkbox']:checked ~ .checkmark {
  background-color: var(--main-color-white);
}

/* Create the checkmark/indicator (hidden when not checked) */
.login-remember input[type='checkbox'] .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.login-remember input[type='checkbox']:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.login-remember input[type='checkbox'] label .checkmark:after {
  left: 7px;
  top: 3px;
  width: 10px;
  height: 15px;
  border: solid var(--main-color-red);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.login-register-lost-password {
  text-align: center;
  padding-bottom: 0 !important;
}

.wppb-description-delimiter,
#pass-strength-result {
  margin-left: 0 !important;
}

.wppb-error,
.wppb-warning {
  border: 1px dotted #c89797 !important;
  background: #ffdfdf !important;
  width: auto !important;
  color: var(--main-color-red) !important;
  margin-bottom: 40px !important;
}

.wppb-error a,
.wppb-warning a {
  color: var(--main-color-black) !important;
}

.wppb-description-delimiter {
  color: var(--main-color-red);
  font-style: normal !important;
}

.login-submit,
.form-submit {
  display: block;
  text-align: center;
  position: relative;
}

.registrieren-wrap .form-submit::before {
  content: ' ';
  background-image: url('img/stern_solo@2x.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  display: block;
  width: var(--registrieren-wrap-formsubmit-before-width);
  height: var(--registrieren-wrap-formsubmit-before-height);
  position: absolute;
  margin: var(--registrieren-wrap-formsubmit-before-margin);
  left: 0;
  top: 0;
}

.login-submit input[type='submit'],
.form-submit input[type='submit'] {
  background-color: var(--main-color-red);
  font-weight: 500;
  text-align: center;
  border-radius: var(--btn-border-radius);
  text-transform: uppercase;
  font-size: var(--base-fontsize);
  line-height: 1.321;
  letter-spacing: 0.56px;
  padding: var(--btn-padding);
  text-decoration: none !important;
  border: none;
  color: var(--main-color-white);
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
}

.login-submit input[type='submit']:hover,
.form-submit input[type='submit']:hover {
  background-color: var(--main-color-black);
}

.einloggen-wrap {
  margin-bottom: var(--einloggen-wrap-margin);
}

.einloggen-wrap .wppb-user-forms {
  display: block;
  position: relative;
}

.einloggen-wrap .wppb-user-forms::before {
  content: ' ';
  background-image: url('img/stern_solo@2x.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  display: var(--page-event-anmeldung-before-display);
  width: var(--einloggen-wrap-wppbuserforms-before-width);
  height: var(--einloggen-wrap-wppbuserforms-before-height);
  position: absolute;
  margin: var(--einloggen-wrap-wppbuserforms-before-margin);
  left: 0;
  top: 0;
}

.einloggen-wrap .wppb-user-forms::after {
  content: ' ';
  background-image: url('img/stern_solo2@2x.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  display: block;
  width: var(--afform-affieldtypecheckbox-before-width);
  height: var(--afform-affieldtypecheckbox-before-height);
  position: absolute;
  margin: var(--einloggen-wrap-wppbuserforms-after-margin);
  right: 0;
  top: 0;
}

.registrieren-inner {
  padding-top: 0 !important;
}

.registrieren-inner.registrierenOpen {
  display: block;
}

.wppb-alert {
  text-align: center;
}

#select_user_to_edit_form,
#wppb-no-other-users-to-edit,
#wppb_register_pre_form_message {
  display: none;
}

/* Passwort zurücksetzen Page */
.page-passwort-zuruecksetzen h1 {
  margin-bottom: var(--page-wettbewerb-p-margin);
}

.page-passwort-zuruecksetzen .wppb-user-forms > p {
  margin-bottom: var(--page-wettbewerb-p-margin);
}

/* Front pages */
#homepage-page {
  background-color: var(--main-color-red);
}

#homepage-page .header,
#homepage-page .footer {
  display: none;
}

#comingsoon-page,
#event-page {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

#comingsoon-page .header,
#event-page .header {

}

#comingsoon-page .footer,
#event-page .footer {
  position: fixed;
  bottom: 0;
  z-index: 999;
}

#comingsoon-page .carousel,
#event-page .carousel {
  width: 100vw;
  height: 100vh;
}

#comingsoon-page .carousel .carousel-inner,
#event-page .carousel .carousel-inner {
  height: 100%;
  width: 100%;
}

#comingsoon-page .carousel .carousel-item,
#event-page .carousel .carousel-item {
  height: 100%;
  width: 100%;
}

#comingsoon-page .carousel .carousel-item > img,
#event-page .carousel .carousel-item > img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

#comingsoon-page .carousel .carousel-caption {
  top: var(--event-slider-carousel-caption-top);
  bottom: auto;
}

#event-page .carousel .carousel-caption {
  top: var(--event-slider-carousel-caption-top);
  bottom: auto;
}

#comingsoon-page .carousel .carousel-caption .yellow,
#event-page .carousel .carousel-caption .yellow {
  color: var(--main-color-yellow);
}

#comingsoon-page .carousel .carousel-caption .white,
#event-page .carousel .carousel-caption .white {
  color: var(--main-color-white);
}

#comingsoon-page .carousel .carousel-caption .btn, .wp-block-button__link,
#comingsoon-page .carousel .carousel-caption .btn, .wp-block-button__link {
  background-color: var(--main-color-white);
  color: var(--main-color-red);
  margin-top: var(--event-slider-carousel-caption-btn-margin);
}

#comingsoon-page .carousel .carousel-caption img,
#event-page .carousel .carousel-caption img {
  width: var(--event-slider-carousel-caption-img-width);
  margin: 15px 0 0 0;
  padding: 0;
}

#livestream-page {
  background-size: cover;
  background-position: center center;
  width: 100vw;
  overflow: hidden-x;
  margin: 0;
}

#livestream-page h1,
#livestream-page h2 {
  color: var(--main-color-yellow);
}

#livestream-page .livestreambild {
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 4% 0 0;
}

#livestream-page .livestreambild .livestream {
  width: 40%;
  max-width: 90%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

#livestream-page .footer {
  display: none;
}

/* Back to top */
.backtotop {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: normal;
}

.backtotop a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: normal;
  width: var(--backtotop-img-width);
  height: var(--backtotop-img-width);
  margin: var(--backtotop-a-padding);
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-white);
  box-shadow: 5px 5px 10px #00000029;
}

.backtotop a:hover {
  background-color: var(--main-color-red);
}

.backtotop a svg {
  width: 100%;
  height: 100%;
}

.backtotop a:hover svg .pfeil-oben-inner {
  stroke: var(--main-color-white);
}

/* Footer */
.footer {
  font-size: var(--footer-fontsize);
  line-height: var(--footer-lineheight);
  letter-spacing: var(--footer-letterspacing);
  background-color: var(--main-color-black);
  width: 100%;
  height: var(--footer-height);
  color: var(--main-color-white);
  padding: var(--footer-padding);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: normal;
}

.footer a {
  color: var(--main-color-white);
}

.footer .copyright {
  text-align: var(--footer-copyright-textalign);
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: normal;
}

.footer .social {
  height: 100%;
  text-align: var(--footer-social-textalign);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: normal;
}

.footer .social img {
  width: var(--footer-social-img-width);
  height: auto;
}

.footer .social a {
  margin: var(--footer-social-a-margin);
}

.footer .datenschutz {
  height: 100%;
  text-align: var(--footer-datenschutz-textalign);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: var(--footer-datenschutz-justifycontent);
  align-items: center;
  align-content: normal;
}

.hide-desktop {
  display: none;
}

.hide-mobile {
  display: block;
}

/* MEDIA QUERIES */

/* !Media max-width 1600px */
@media all and (max-width: 1600px) {
  :root {
    --base-fontsize: 24px;
    --base-lineheight: 1.357;
    --base-letterspacing: 0.22px;

    --bold-fontsize: 24px;
    --bold-lineheight: 1.357;
    --bold-letterspacing: 0.28px;

    --small-fontsize: 19px;
    --small-lineheight: 1.363;
    --small-letterspacing: 0.44px;

    --footer-fontsize: 19px;
    --footer-lineheight: 1.363;
    --footer-letterspacing: 0.22px;

    --nav-font-size: clamp(19px, 23px, 23px);
    --nav-font-line-height: 1.321;
    --nav-font-letter-spacing: 0.56px;

    --h1-fontsize: 75px;
    --h1-line-height: 1.055;
    --h1-letter-spacing: 2.7px;
    --h1-margin: 38px 0 67px;

    --h2-fontsize: 42px;
    --h2-line-height: 1;
    --h2-letter-spacing: 1.5px;

    --body-margin: 125px 0 0 0;

    --page-padding: 0 50px;

    --header-height: 125px;

    --nav-padding: 0 50px;
    --nav-li-margin: 35px;
    --nav-dropdown-toggle-padding: 38px;

    --btn-border-radius: 50px;
    --btn-padding: 18px 40px;
    --btn-margin: 34px 0;

    --page-template-default-h1-margin: 38px 0;

    --content-post-hr-margin: 61px 0 61px -3333px;

    --content-post-hrshort-margin: 61px auto;

    --buch-buchcover-padding: 30px 30px 0 30px;

    --page-wettbewerb-h1-margin: 34px;
    --page-wettbewerb-h2-margin: 67px;
    --page-wettbewerb-p-margin: 50px;

    --page-event-anmeldung-margin: 0 -18%;
    --page-event-anmeldung-padding: 5px 250px 50px;
    --page-event-anmeldung-before-widthheight: 332px;

    --afform-affield-margin: 42px;
    --afform-affieldtypecheckbox-before-width: 145px;
    --afform-affieldtypecheckbox-before-height: 154px;

    --page-einloggen-wpblockgroup-padding: 42px 0;
    --page-einloggen-wpblockgroup-div-p-padding: 0 250px;

    --registrieren-wrap-formsubmit-before-width: 115px;
    --registrieren-wrap-formsubmit-before-height: 125px;
    --registrieren-wrap-formsubmit-before-margin: -25px 0 0 190px;

    --einloggen-wrap-wppbuserforms-before-width: 182px;
    --einloggen-wrap-wppbuserforms-before-height: 195px;
    --einloggen-wrap-wppbuserforms-before-margin: 50px 0 0 28px;
    --einloggen-wrap-wppbuserforms-after-margin: 380px 60px 0 0;

    --backtotop-a-padding: 67px 0 50px;
    --backtotop-img-width: 60px;

    --event-slider-carousel-caption-top: 180px;
  }
}

/* !Media max-width 1440px */
@media all and (max-width: 1440px) {
  :root {
    --base-fontsize: 21px;
    --base-lineheight: 1.357;
    --base-letterspacing: 0.22px;

    --bold-fontsize: 21px;
    --bold-lineheight: 1.357;
    --bold-letterspacing: 0.28px;

    --small-fontsize: 18px;
    --small-lineheight: 1.363;
    --small-letterspacing: 0.44px;

    --footer-fontsize: 18px;
    --footer-lineheight: 1.363;
    --footer-letterspacing: 0.22px;

    --nav-font-size: clamp(18px, 20px, 20px);
    --nav-font-line-height: 1.321;
    --nav-font-letter-spacing: 0.56px;

    --h1-fontsize: 68px;
    --h1-line-height: 1.055;
    --h1-letter-spacing: 2.7px;
    --h1-margin: 34px 0 60px;

    --h2-fontsize: 38px;
    --h2-line-height: 1;
    --h2-letter-spacing: 1.5px;

    --body-margin: 113px 0 0 0;

    --page-padding: 0 45px;

    --header-height: 113px;
    --nav-padding: 0 45px;
    --nav-li-margin: 32px;
    --nav-dropdown-toggle-padding: 34px;

    --btn-padding: 16px 36px;
    --btn-margin: 30px 0;

    --page-template-default-h1-margin: 34px 0;

    --content-post-hr-height: 25px;
    --content-post-hr-margin: 55px 0 55px -3333px;
    --content-post-hrshort-width: 114px;
    --content-post-hrshort-margin: 55px auto;
    --content-post-wppostgallery-margin: 0 -31% 45px;

    --buch-buchcover-padding: 20px 20px 0 20px;

    --page-wettbewerb-h1-margin: 30px;
    --page-wettbewerb-h2-margin: 60px;
    --page-wettbewerb-p-margin: 45px;

    --page-event-anmeldung-margin: 0 -10%;
    --page-event-anmeldung-padding: 2px 225px 45px;
    --page-event-anmeldung-before-widthheight: 300px;

    --afform-affield-margin: 38px;
    --afform-affieldtypecheckbox-before-width: 131px;
    --afform-affieldtypecheckbox-before-height: 138px;
    --afform-affieldtypecheckbox-afinput-label-input-widthheight: 23px;

    --page-einloggen-wpblockgroup-padding: 38px 0;
    --page-einloggen-wpblockgroup-div-p-padding: 0 225px;

    --registrieren-wrap-formsubmit-before-width: 104px;
    --registrieren-wrap-formsubmit-before-height: 112px;
    --registrieren-wrap-formsubmit-before-margin: -23px 0 0 160px;

    --einloggen-wrap-wppbuserforms-before-width: 164px;
    --einloggen-wrap-wppbuserforms-before-height: 176px;
    --einloggen-wrap-wppbuserforms-before-margin: 45px 0 0 25px;
    --einloggen-wrap-wppbuserforms-after-margin: 340px 54px 0 0;

    --backtotop-a-padding: 60px 0 45px;
    --backtotop-img-width: 54px;

    --footer-height: 81px;
    --footer-padding: 0 60px;
    --footer-social-img-width: 33px;

    --event-slider-carousel-caption-top: 140px;
  }
}

/* !Media max-width 1280px */
@media all and (max-width: 1280px) {
  :root {
    --base-fontsize: 19px;
    --base-lineheight: 1.357;
    --base-letterspacing: 0.22px;

    --bold-fontsize: 19px;
    --bold-lineheight: 1.357;
    --bold-letterspacing: 0.28px;

    --small-fontsize: 16px;
    --small-lineheight: 1.363;
    --small-letterspacing: 0.44px;

    --footer-fontsize: 16px;
    --footer-lineheight: 1.363;
    --footer-letterspacing: 0.22px;

    --nav-font-size: clamp(16px, 18px, 18px);
    --nav-font-line-height: 1.321;
    --nav-font-letter-spacing: 0.56px;

    --h1-fontsize: 60px;
    --h1-line-height: 1.055;
    --h1-letter-spacing: 2.7px;
    --h1-margin: 30px 0 54px;

    --h2-fontsize: 34px;
    --h2-line-height: 1;
    --h2-letter-spacing: 1.5px;

    --body-margin: 100px 0 0 0;

    --page-padding: 0 40px;

    --header-height: 100px;
    --nav-padding: 0 40px;
    --nav-li-margin: 28px;
    --nav-dropdown-toggle-padding: 30px;

    --btn-padding: 12px 32px;
    --btn-margin: 27px 0;

    --page-template-default-h1-margin: 30px 0;

    --content-post-hr-height: 22px;
    --content-post-hr-margin: 49px 0 49px -3333px;
    --content-post-hrshort-width: 101px;
    --content-post-hrshort-margin: 49px auto;
    --content-post-wppostgallery-margin: 0 -31% 40px;

    --buch-buchcover-padding: 20px 20px 0 20px;

    --page-wettbewerb-h1-margin: 27px;
    --page-wettbewerb-h2-margin: 54px;
    --page-wettbewerb-p-margin: 40px;

    --page-event-h3-margin: 14px;

    --page-event-anmeldung-margin: 0 -2%;
    --page-event-anmeldung-padding: 2px 200px 40px;
    --page-event-anmeldung-before-widthheight: 266px;

    --afform-affield-margin: 34px;
    --afform-affield-afinput-padding: 14px;
    --afform-affieldtypecheckbox-before-width: 116px;
    --afform-affieldtypecheckbox-before-height: 123px;
    --afform-affieldtypecheckbox-afinput-label-input-widthheight: 20px;

    --page-einloggen-wpblockgroup-padding: 34px 0;
    --page-einloggen-wpblockgroup-div-p-padding: 0 200px;

    --registrieren-wrap-formsubmit-before-width: 92px;
    --registrieren-wrap-formsubmit-before-height: 100px;
    --registrieren-wrap-formsubmit-before-margin: -20px 0 0 140px;

    --einloggen-wrap-wppbuserforms-before-width: 146px;
    --einloggen-wrap-wppbuserforms-before-height: 156px;
    --einloggen-wrap-wppbuserforms-before-margin: 40px 0 0 22px;
    --einloggen-wrap-wppbuserforms-after-margin: 300px 48px 0 0;

    --backtotop-a-padding: 54px 0 40px;
    --backtotop-img-width: 48px;

    --footer-height: 72px;
    --footer-padding: 0 55px;
    --footer-social-img-width: 30px;
    --footer-social-a-margin: 0 8px 0;
  }
}

/* !Media max-width 1180px */
@media all and (max-width: 1180px) and (orientation: landscape) {
  :root {}
}

/* !Media max-width 1024px */
@media all and (max-width: 1024px) {
  :root {
    --nav-font-size: clamp(15px, 16px, 16px);
    --nav-padding: 0 15px;
    --nav-li-margin: 22px;

    --buch-buchcover-padding: 20px 20px 0 20px;

    --content-post-hr-height: 33px;
    --content-post-hr-width: 100%;
    --content-post-hr-margin: 0 0 24px 0;
    --content-post-hrshort-width: 120px;
    --content-post-hrshort-margin: 24px auto;
    --content-post-wppostgallery-margin: 0 -31% 60px;
  }
}

/* !Media max-width 912px Portrait */
@media all and (max-width: 912px) {
  :root {
    --header-height: 78px;

    --nav-display: none;
    --desktop-brand-display: none;
    --mobile-nav-brand-display: flex;
    --mobile-nav-brand-padding: 0;
    --mobile-nav-brand-inner-width: calc(80% - 70px);
    --mobile-nav-brand-inner-padding: 0 20px 0 0;
    --mobile-nav-brand-btn-width: 50px;
    --mobile-nav-brand-btn-margin: 20px;

    --nav-font-size: clamp(22px, 28px, 28px);
    --nav-font-line-height: 1.321;
    --nav-font-letter-spacing: 0.56px;
    --mobile-nav-mobilenav-padding: 23px 0 23px 30px;
    --mobile-nav-mobilenav-hr-width: calc(100% + 30px);
    --mobile-nav-mobilenav-hr-margin: 10px 0 10px -30px;

    --buch-mehrinfo-flex-wrap: wrap;
    --buch-buchcover-padding: 20px 20px 0 20px;

    --page-event-anmeldung-before-display: none;

    --page-event-anmeldung-padding: 0 24px 24px;

    --page-einloggen-wpblockgroup-div-p-padding: 0 50px;

    --event-slider-carousel-caption-width: 100%;
  }
  .buch .buchcover .buchcov {
    display: none;
  }
  .buch .buchcover .buchcov-mobile {
    display: block;
  }
  .buch .buchcover .btn-buch {
    display: none;
  }
  .buch .buchcover .btn-buch-mobile {
    display: inline-block;
    margin: 15px 0;
  }
}

/* !Media max-width 932px Landscape */
@media all and (max-width: 932px) and (orientation: landscape) {
  :root {
    --header-height: 78px;

    --nav-display: none;
    --desktop-brand-display: none;
    --mobile-nav-brand-display: flex;
    --mobile-nav-brand-padding: 0;
    --mobile-nav-brand-inner-width: calc(60% - 70px);
    --mobile-nav-brand-inner-padding: 0 20px 0 0;
    --mobile-nav-brand-btn-width: 50px;
    --mobile-nav-brand-btn-margin: 20px;

    --nav-font-size: clamp(22px, 28px, 28px);
    --nav-font-line-height: 1.321;
    --nav-font-letter-spacing: 0.56px;
    --mobile-nav-mobilenav-padding: 23px 0 23px 30px;
    --mobile-nav-mobilenav-hr-width: calc(100% + 30px);
    --mobile-nav-mobilenav-hr-margin: 10px 0 10px -30px;

    --buch-mehrinfo-flex-wrap: wrap;
    --buch-buchcover-padding: 20px 20px 0 20px;

    --content-post-hr-height: 33px;
    --content-post-hr-width: 100%;
    --content-post-hr-margin: 0 0 24px 0;
    --content-post-hrshort-width: 120px;
    --content-post-hrshort-margin: 24px auto;
    --content-post-wppostgallery-margin: 0 -31% 60px;

    --page-einloggen-wpblockgroup-div-p-padding: 0 50px;

    --page-event-anmeldung-padding: 0 24px 24px;
  }
  .buch .buchcover .buchcov {
    display: none;
  }
  .buch .buchcover .buchcov-mobile {
    display: block;
  }
  .buch .buchcover .btn-buch {
    display: none;
  }
  .buch .buchcover .btn-buch-mobile {
    display: inline-block;
    margin: 15px 0;
  }
}

/* !Media max-width 667px Landscape */
@media all and (max-width: 667px) and (orientation: landscape) {
  :root {}
}

/* !Media max-width 430px Portrait */
@media all and (max-width: 430px) and (orientation: portrait) {
  :root {
    --base-fontsize: 16px;
    --base-lineheight: 1.375;
    --base-letterspacing: 0.13px;

    --bold-fontsize: 16px;
    --bold-lineheight: 1.375;
    --bold-letterspacing: 0.13px;

    --small-fontsize: 16px;
    --small-lineheight: 1.375;
    --small-letterspacing: 0.13px;

    --footer-fontsize: 16px;
    --footer-lineheight: 1.375;
    --footer-letterspacing: 0.13px;

    --nav-font-size: 25px;
    --nav-font-line-height: 1.52;
    --nav-font-letter-spacing: 0.5px;

    --h1-fontsize: 33px;
    --h1-line-height: 1.06;
    --h1-letter-spacing: 0.99px;
    --h1-margin: 30px 0;

    --h2-fontsize: 18px;
    --h2-line-height: 1.11;
    --h2-letter-spacing: 0.54px;

    --body-margin: 78px 0 0 0;

    --header-height: 78px;

    --mobile-nav-brand-inner-padding: 0;

    --nav-display: none;
    --desktop-brand-display: none;
    --nav-padding: 0 23px 0 23px;
    --mobile-nav-brand-display: flex;
    --mobile-nav-brand-inner-width: calc(90% - 58px);
    --mobile-nav-brand-btn-width: 38px;

    --mobile-nav-mobilenav-padding: 23px 0 23px 30px;
    --mobile-nav-mobilenav-hr-width: calc(100% + 30px);
    --mobile-nav-mobilenav-hr-margin: 10px 0 10px -30px;

    --btn-padding: 9px 15px;
    --btn-margin: 0 0 24px 0;

    --page-padding: 0;

    --buch-margin: 12px;
    --buch-buchcover-padding: 15px 15px 0 15px;
    --buch-meta-margin: 15px 0;
    --buch-kommentare-padding: 6px 0;

    --content-post-hr-height: 17px;
    --content-post-hr-width: 100%;
    --content-post-hr-margin: 0 0 24px 0px;
    --content-post-hrshort-width: 66px;
    --content-post-hrshort-margin: 24px auto;
    --content-post-wppostgallery-margin: 0 -31% 60px;

    --page-wettbewerb-h1-margin: 15px;
    --page-wettbewerb-h2-margin: 24px;
    --page-wettbewerb-p-margin: 24px;

    --page-event-anmeldung-margin: 0 -15px;
    --page-event-anmeldung-padding: 1px 24px 15px;
    --page-event-anmeldung-before-display: none;

    --einloggen-wrap-wppbuserforms-after-margin: 90% 0 0 0;
    --afform-affieldtypecheckbox-before-width: 69px;
    --afform-affieldtypecheckbox-before-height: 73px;
    --afform-affield-margin: 24px;

    --page-einloggen-wpblockgroup-padding: 30px 24px;
    --page-einloggen-wpblockgroup-div-p-padding: 0;
    --registrieren-wrap-formsubmit-before-margin: -10px 0 0 5%;
    --registrieren-wrap-formsubmit-before-width: 60px;
    --registrieren-wrap-formsubmit-before-height: 65px;

    --einloggen-wrap-margin: 15px;

    --einloggen-wrap-login-remember-width: 100%;

    --backtotop-a-padding: 30px 0 30px;
    --backtotop-img-width: 45px;

    --footer-height: auto;
    --footer-padding: 15px 34px 0;
    --footer-copyright-textalign: center;
    --footer-social-textalign: center;
    --footer-datenschutz-textalign: center;
    --footer-datenschutz-justifycontent: center;

    --event-slider-carousel-caption-img-width: 150px;
    --event-slider-carousel-caption-btn-margin: 20px;
  }
  .hide-mobile {
    display: none;
  }
  .hide-desktop {
    display: block;
  }
  .wp-block-spacer {
    height: 2px !important;
  }
  .animate-buch:nth-child(odd) {
    padding-left: 12px;
    padding-right: 6px;
  }
  .animate-buch:nth-child(even) {
    padding-left: 6px;
    padding-right: 12px;
  }
  .buch .buchcover .buchcov {
    display: none;
  }
  .buch .buchcover .buchcov-mobile {
    display: block;
  }
  .buch .buchcover .btn-buch {
    display: none;
  }
  .buch .buchcover .btn-buch-mobile {
    display: inline-block;
    margin: 15px 0;
  }
}

/* !Media max-width 390px Portrait */
@media all and (max-width: 390px) and (orientation: portrait) {
  :root {}
}

/* !Media max-width 375px Portrait */
@media all and (max-width: 375px) and (orientation: portrait) {
  :root {}
}