/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/
@font-face {
  font-family: 'Lovers Quarrel';
  src: url(assets/schriften/LoversQuarrel-Regular.ttf);
  font-display: fallback;
}

@font-face {
  font-family: 'HankenGrotesk';
  src: url(assets/schriften/HankenGrotesk-VariableFont_wght.ttf);
  font-display: fallback;
}

/*TYPOGRAFIE UND ALLGEMEINE TAGS*/
body {background-color:#fff;color:#312109;font-family: 'HankenGrotesk', sans-serif;margin: 0;-webkit-font-smoothing: auto;font-size:1.2rem;font-weight:300;background-image:radial-gradient(closest-corner at 30% 30%,rgba(159,118,69,0.1) 10%, rgba(159,118,69,0.2) 40%,rgba(159,118,69,0.2) 50%, rgba(159,118,69,0.3) 70%);}
h2, h3, h4, h5, h6 {
  clear: both;
  color: #bb0b05;
  font-weight: 200;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1 {
  font-size: 2.2rem;
  padding-bottom: 10px;
  color: #bb0b05;
  font-weight: 200;
  margin-top: 25px;
  margin-bottom: 25px;
}
h1::first-letter {
  font-family: 'Lovers Quarrel', cursive;
  font-size: 6rem;
  font-weight: 400;
  line-height: 70px;
  padding-bottom: 0;
}

h2 {
  font-family: 'Lovers Quarrel', cursive;
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1.05;
}
a{color: #bb0b05;text-decoration:none;}
video{width:100%;}
/*ALLGEMEINE STILE*/
.hg-weiss{background-color:#fff;}
.hg-rot {background-color: #800b07; color:#fff;}
.hg-weiss-transparent{background-color: rgba(255,255,255,0.7);padding-bottom: 5rem;}
.hg-rot {background-image:lineal-gradient(75deg,#bb0b05 10%, #5d0704 40%,rgba(159,118,69,0.3) 50%, #800b07 70%);background-image: linear-gradient(-75deg, #bb0b05 10%,#5d0704 40%, #800b07 90%);}
.hg-beige{background-color:rgba(159,118,69,.05);}
.umrahmung {background-color: rgba(0,0,0,0.1);border: solid 1px #fcfcfc;padding: 1.5rem;}
.einrahmung {background-color:rgba(255,255,255,0.5);border:none;margin-bottom:3rem;padding: 2rem;position: relative;}
.abstand-oben-unten { margin-top: 3rem;padding: 3em 0;}
.abstand_lr {padding: 0 2rem;}
.kontakt_aufnehmen {display: flex;align-items: center;margin-top: 0.5rem;}
.kreis{background: transparent url(assets/img/ranke-schalter.png) no-repeat left center;display: flex;align-items: center;height: 3.3rem;justify-content: center; padding: 1rem;width: 3.3rem;transition:all ease 0.4s;}
.kreis i{font-size: 0.9rem;opacity:0.8;padding: 0 0 0 8px;transition: all ease-in-out 0.2s;}
.rahmung{border-bottom: solid 1px #fff;border-right: solid 1px #fff;border-top: solid 1px #fff;display: flex;align-items: center;height: 2rem;margin-left: -1rem;padding: 1rem 2rem;min-width: 250px; transition:all ease 0.4s;}
.kontakt_aufnehmen:hover .kreis{ transform:rotate(-25deg);}
.kontakt_aufnehmen:hover .rahmung{min-width: 280px;}
/*KOPFZEILE*/
.navbar-brand{padding:0.5rem 0 0;}
h2.seitenkopf {font-size: 3.2rem;margin-bottom:0;margin-top: .5rem;}
.logo{max-height:38px;}
.kopfbild{margin-top:0;}
/*NAVIGATION*/
.navbar.navbar-expand-lg{padding-top:0;}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: 1.1rem;
  font-weight: var(--bs-nav-link-font-weight);
  color:#312109;
  text-decoration: none;
  text-transform:uppercase;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(128,11,7, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
/*****************
 #INHALT SEITEN 
 ****************/
.entry-header {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
.entry-header h1{
  color: #fff;
  border-bottom: none;
  margin-bottom: 0;
}
/*--------------------------------------------------------------
## Glühwürmchen Animation
--------------------------------------------------------------*/
.maerchenhafte-spaziergaenge {
  background: #000 url(assets/img/maerchenhafte-spaziergaenge-hg2.jpg) no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
  height: auto;
  min-height: 550px;
  padding: 1.5rem 0 3rem 0;
  position: relative;
}
.gluehwurm0{
	border-radius:50%;
 width: 30px;
  height: 30px;
  background-color: #fff;
  position:absolute;
  animation-name: gluehwurmchen0;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  z-index:444;
}
.gluehwurm1{
	border-radius:50%;
 width: 6px;
  height: 6px;
  background-color: #fff;
  position:absolute;
  animation-name: gluehwurmchen1;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  z-index:444;
}
.gluehwurm2{
	border-radius:50%;
 width: 6px;
  height: 6px;
  background-color: #fff;
  position:absolute;
  animation-name: gluehwurmchen2;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  z-index:444;
}
.gluehwurm3{
	border-radius:50%;
 width: 6px;
  height: 6px;
  background-color: #fff;
  position:absolute;
  animation-name: gluehwurmchen3;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  z-index:444;
}
.gluehwurm4{
	border-radius:50%;
 width: 12px;
  height: 12px;
  background-color: #fff;
  position:absolute;
  animation-name: gluehwurmchen4;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  z-index:444;
}
@keyframes gluehwurmchen0 {
  0%   {opacity: 0.5;
    filter: blur(.5rem);background-color:#fff; left:6%; top:70%;width:30px;height:30px;}
  50%  {opacity: 0.7;
    filter: blur(.6rem);background-color:#ccc; left:6%; top:71%;width:25px;height:25px;}
  75% {opacity: .8;
    filter: blur(.8rem);background-color:#fcfcfc; left:6%; top:70%;width:30px;height:30px;}
	 100% {opacity:0.9;
    filter: blur(1rem);background-color:#fcfcfc; left:6%; top:70.5%;width:25px;height:25px;}
}
@keyframes gluehwurmchen1 {
  0%   {opacity: 0.9;
    filter: blur(.2rem);background-color:#fff; left:10%; top:30%;width:6px;height:6px;}
  50%  {opacity: 0.7;
    filter: blur(.6rem);background-color:#ccc; left:11%; top:35%;width:7px;height:7px;}
  75% {opacity: .8;
    filter: blur(.8rem);background-color:#fcfcfc; left:12%; top:28%;width:9px;height:9px;}
	 100% {opacity: 1;
    filter: blur(1rem);background-color:#fcfcfc; left:11%; top:29%;width:7px;height:7px;}
}
@keyframes gluehwurmchen2 {
  0%   {opacity: 0.8;
    filter: blur(.3rem);background-color:#fff; left:80%; top:30%;width:6px;height:6px;}
  50%  {opacity: 0.7;
    filter: blur(.6rem);background-color:#ccc; left:81%; top:32%;width:7px;height:7px;}
	75% {opacity: .8;
    filter: blur(.8rem);background-color:#fcfcfc; left:80%; top:31%;width:9px;height:9px;}
  100% {opacity: 1;
    filter: blur(.9rem);background-color:#fcfcfc; left:82%; top:29%;width:7px;height:7px;}
}
@keyframes gluehwurmchen3 {
  0%   {opacity: 0.6;
    filter: blur(.3rem);background-color:#fff; left:85%; top:55%;width:6px;height:6px;}
  50%  {opacity: 0.7;
    filter: blur(.6rem);background-color:#ccc; left:86%; top:54%;width:7px;height:7px;}
	75% {opacity: .8;
    filter: blur(.8rem);background-color:#fcfcfc; left:86%; top:55%;width:9px;height:9px;}
  100% {opacity: 1;
    filter: blur(.65rem);background-color:#fcfcfc; left:85%; top:56%;width:7px;height:7px;}
}
@keyframes gluehwurmchen4 {
  0%   {opacity: 0.6;
    filter: blur(.3rem);background-color:#fff; left:95%; top:75%;width:12px;height:12px;}
  50%  {opacity: 0.7;
    filter: blur(.6rem);background-color:#ccc; left:96%; top:74%;width:11px;height:11px;}
	75% {opacity: .8;
    filter: blur(.8rem);background-color:#fcfcfc; left:96%; top:75%;width:10px;height:10px;}
  100% {opacity: 1;
    filter: blur(.65rem);background-color:#fcfcfc; left:95%; top:74%;width:11px;height:11px;}
}
/*STARTSEITE */
.hg-rot h2, .hg-schwan h2, .hg-rot p, .hg-schwan p, .hg-schwan a, .hg-rot a, .nachtschwaermer h2, .nachtschwaermer p, .nachtschwaermer a, .maerchenhafte-spaziergaenge h2, .maerchenhafte-spaziergaenge p, .maerchenhafte-spaziergaenge a {
  color: #fff;
}
.hg-rot h3, .nachtschwaermer h3, .maerchenhafte-spaziergaenge h3 {
  color: #dec034;
}
.hg-schwan {
  background: url(img/hg-schwan-schmuck-start.jpg) no-repeat;
    background-size: auto;
  background-size: cover;
}
.trenner-schwan {
  margin: .65rem auto 0;
  text-align: center;
}
.ihr-maerchentag {
  margin-top: -2.5rem;
}
.bild-mit-umfliessenden-text {
  float: left; 
	
	shape-outside: ellipse(224px 320px at 35.1% 50%);
}

/*
.wrapper {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.wrapper:hover svg {
  visibility: visible;
}

svg {
  width: 250px;
  height: auto;
  visibility: hidden;
}

p {
  hyphens: auto;
  display: block;
  text-align: justify;
  font-family: sans-serif;
}

.left {
  float: left;
  shape-outside: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 250 500' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M250,-0L250,10.652C228.26,17.372 208.13,29.387 189.604,46.698C143.127,90.128 101.602,135.082 65.029,181.559C28.457,228.036 26.171,276.8 58.172,327.849C90.173,378.898 131.698,423.851 182.747,462.709C204.345,479.15 226.763,489.453 250,493.619L250,500L0,500L0,-0L250,-0Z'/%3E%3C/svg%3E%0A");
}

.right {
  float: right;
  shape-outside: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 250 500' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-250,0)'%3E%3Cpath d='M250,-0L500,-0L500,500L250,500L250,493.619C281.68,499.298 314.883,493.567 349.608,476.424C409.8,446.709 444.468,401.755 453.611,341.563C462.754,281.371 465.992,217.941 463.325,151.273C460.659,84.604 425.991,39.651 359.323,16.412C319.228,2.436 282.785,0.517 250,10.652L250,-0Z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
*/
/*SEITE Medien */
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #fff;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
/*SEITE Veranstaltungen */
.inhaltsverzeichnis{ padding:2% 3.5%;}
.veranstaltungen{background-color: rgba(255,255,255,0.5);margin-bottom:3rem;padding: 3.5% 3.5% .5%;}
.veranstaltung{background-color: rgba(255,255,255,0.85);margin-bottom:3rem;padding: 3.5% 3.5%;}
.veranstaltung .einrahmung {
  background-color: transparent;
  border: solid 1px #bb0b05;
  margin-bottom:3rem;
  padding: 3% 3.5%;
  position: relative;
}
.beschreibung_hinweise_veranstaltungen{margin:2rem 0 0;}
.beschreibung{padding:0 2rem 0 0;}
input.anmeldung{background:transparent url(img/ranke-schalter-rot.png) no-repeat left top; border:none;color:#bb0b05;padding:0.5rem 1rem;white-space: wrap;}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.wpcf7-form label,.wpcf7-form-control.wpcf7-submit.btn.btn-primary,.wpcf7-form-control-wrap input,.wpcf7-form-control-wrap textarea{width:100%;}
.wpcf7-form-control.wpcf7-submit{background-color:#bb0b05; color:#fff; padding:1rem 0;width:100%;}
.wpcf7-form-control-wrap input{margin-bottom:.5rem;}
.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item{margin-left:0; width:100%;}
.wpcf7-list-item input[type="checkbox"]{width:10%; float:left;}
.wpcf7-list-item-label{width:85%; display:inline-block;}
.form-control::placeholder {
  color: #000;
  opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #fff;
  border:none;
  color:#CD2426;
  font-size:1.2rem;
  opacity: 1;
  padding-left:0;
}
.titel-veranstaltung input,.datum-veranstaltung input,.zeit-veranstaltung input{
  background-color:rgba(255,255,255,0.1);
  border:none;
  color:#CD2426;
  opacity: 1;
  padding-left:0;
  width:100%;
}
.titel-veranstaltung input{
  font-size:1.35rem;
}
.datum-veranstaltung input,.zeit-veranstaltung input{
  font-size:1.1rem;
}

.wpcf7-form-control.wpcf7-submit.btn.btn-primary{ background-color:#bb0b05; color:#fff; padding:.5rem 0;}

/*--------------------------------------------------------------
# FUßZEILE
--------------------------------------------------------------*/
.kuenstlerin {
  background: url(https://www.maerchenzeit.eu/wp-content/uploads/2022/08/die-malerin.jpg) no-repeat center center;
    background-size: auto;
  background-size: cover;
}
.verweis{font-size: .9rem;padding: .1rem 0 1rem;}
/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
  html {
    font-size: 95%;
  }
}

@media screen and (max-width: 1199px) {
	body:not(.theme-preset-active) #masthead.faerben .navbar-nav > li > a {
  padding:.6rem 0.5rem;
  font-size: 1.1rem;
}
  .navbar-dark .dropdown-item {
    color: #fff;
  }
  .navbar-nav .dropdown-menu {
    background: transparent;
    box-shadow: none;
    border: none;
  }
}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
 .kopfbild img{height:450px; object-fit:cover;}
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
  html {
    font-size: 85%;
  }
  body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
  padding: 0.7rem 0.3rem;
  font-size: 1.25rem;
}
.dropdown-menu .dropdown-item {
font-size: 1.2rem;
 padding: 0.5rem 0.3rem;
}
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  .kopfbild_sigrid{background-position:-200px;height:450px;}
}
@media only screen and (max-width: 765px) {
  .titelbild{padding-right:15px;}
  .einrahmung{padding:2rem 1.5rem;}
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
  .kopfbild img{height:250px; object-fit:cover;}
  h2.seitenkopf {font-size: 2.5rem;}
  a.page-scroller {display:none;}
}
