/* ############# Grundeinstellungen ############# */
/* ### Schriften ### */
/* kaushan-script-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kaushan Script';
  src: url('../fonts/kaushan/kaushan-script-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-style: normal;
  font-weight: 400;
}

/* ubuntu-300 - 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: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/ubuntu/ubuntu-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-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: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu/ubuntu-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-italic - 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: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/ubuntu/ubuntu-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-500 - 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: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ubuntu/ubuntu-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-500italic - 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: 'Ubuntu';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/ubuntu/ubuntu-v20-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-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: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu/ubuntu-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


p, h2, h3, ul li, ol li{
  color: #fff;
}
p, ul, ul li, ol, ol li {
  font-size: 1rem;
  font-family: 'Ubuntu', sans-serif;
}

@media (min-width: 576px){
  p, ul li, ol li{
    font-size: 1.4rem;
  }
}

body.impressum p, body.datenschutz p{
  font-size: 1.4rem;
}

h1 {
  color: orange;
  font-size: 15vw;
  font-family: 'Kaushan Script', cursive;
  padding-bottom: 1vw;
  text-align: center;
}
@media (min-width: 576px){
  h1 {
    font-size: 10vw;
  }
}
@media (min-width: 992px){
  h1 {
    font-size: 5vw;
  }
}
h2{
  padding: 1.6rem 0 1rem 0;
  font-size: 2.4rem;
  font-family: 'Kaushan Script', cursive;
}
h3{
  font-size: 2rem;
  font-family: 'Kaushan Script', cursive;
}

a, orange{
  color: orange;
}
a:hover{
  color: #fff;
}

#body {
  margin-top: 58px;
}

@media (min-width: 992px){
  .container {
    max-width: 50vw;
  }
}
/* p.hero-logo {
  position: absolute;
} */

p.hero-logo {
  position: fixed;
  top: 10vh;
  left: 1vw;
  max-width: 16vw;
}
@media (min-width: 576px){
  p.hero-logo {
    top: 5vh;
    left: 1vw;
    max-width: 10vw;
  }
}
@media (min-width: 992px){
  p.hero-logo {
    top: 10vh;
    left: 4vw;
  }
}

/* ############# NAVIGATION ############# */
#top-navbar {
  justify-content: flex-start !important;
}
.navbar, .footer{
  background-color: rgb(0 0 0 / 52%) !important;
}
/* Menü-Schrift */
.navbar-light .navbar-nav .nav-link {
  color: orange;
  font-size: 1.1rem;
  font-weight: 600;
}
.navbar .navbar-nav .nav-link:focus, 
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active a {
  color: #fff;
}
.navbar-light .navbar-toggler {
  background-color: orange;
  margin-right: 1rem;
}
/* Aufgeplappt */
ul.navbar-nav {
  padding-left: 2rem;
}

/* ############# EINZELSEITEN ############# */
/* ###### Alle Seiten ###### */
body.front{
  height: 100vh;
  background: url(/user/images/background/front.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


.hero-content.container{
  background-color: rgb(198 159 104 / 67%);  
  padding: 1rem 1rem 2rem 1rem;
}

@media (min-width: 576px){}

@media (min-width: 992px){
  .hero-content.container{
    padding: 3rem 1rem 4rem 1rem;
  }
}
img {
  max-width: 100%;
}
/* ###### Frontseite ###### */
body.aktuelles, body.vita, body.werkstatt, body.produkte, body.kurse, body.anfahrt, body.kontakt, body.impressum, body.datenschutz{
  background: url(/user/images/background/toepferkurse.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.front-bgr-overlay{
  height: 83vh;
  display: flex;
  /* flex-grow: 1; */
  flex-wrap: wrap;
  flex-direction: column;
}
@media (min-width: 992px){
  .front-bgr-overlay{
    height: 93vh;
  }
}
.front-name {
  display: flex;
  flex-grow: 1 /* Content unten */;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 13vw;
  padding-top: 13vh;
  padding-left: 1em;
  padding-right: 1em;
  color: orange;

}
@media (min-width: 992px){
    .front-name {
      font-size: calc(16px + 4vw);
      padding-top: 20vh;
    }
  }
.front-content {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: calc(16px + 1vw);
  color: orange;
  /* width: 30vw; */
  text-align: left;
  padding-left: 1em;
  padding-right: 1em;
  font-family: 'Kaushan Script', cursive;
}

/* ###### Aktuelles ###### */
.sign{
  color: orange;
  font-size: 2.2rem;
  font-family: 'Kaushan Script', cursive;
}
/* ###### Produkte ###### */
.dekoartikel img, .geschirr img, .lichter img {
  height: 240px;
  object-fit: cover;
  object-position: top center;
  /* object-position: 25% 25%;  */
  border: 0.8rem solid #fff;
  margin: 1vh 0 1vh 1vh;
}
/* ###### Werkstatt ###### */
.werkstatt .hero-content.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
}

/* ###### Töpferkurse ###### */
.toepferkurs.vid {
  padding: 4vh 0 2vh 0;
}
/* Accordions Titel */
.accordion-item {
  background-color: transparent;
  border: none;
}

button.accordion-button.orange {
  background-color: #fff;
  color: #ff9500;
  font-size: 1.4rem;
  font-family: 'Kaushan Script', cursive;
}

@media (min-width: 576px){
  button.accordion-button.orange {
    font-size: 2rem;
  }
}

/* Aufklapp-Zeichen */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");
}
.accordion-button::after {
  width: 1rem;
  height: 1rem;
  background-size: 1rem 
}
@media (min-width: 576px){
  .accordion-button::after {
    width: 1.25rem;
    height: 1.25rem;
    background-size: 1.25rem 
  }
}

.accordion-button:focus {
    border-color: unset;
    box-shadow: none;
}
/* Slider */
.carousel-item img {
  object-fit: cover;
  object-position: center;
  height: 80vh;
  overflow: hidden;
}


/* ############# Kontakt ############# */
form#contact-form {
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(198 159 104 / 67%);  
  padding: 1rem 1rem 2rem 1rem;
}

@media (min-width: 992px){
  form#contact-form {
    max-width: 50vw;
  }
}
.col-form-label, .form-label {
  color: #fff;
  font-weight: 600;
}
#contact-form button[type=submit] {
  background-color: orange;
  color: #fff;
}

/* Antwortformular */
.kontakt-antwort {
  justify-content: center;
  align-items: center;
  background-color: #a5a2a2;
}
.kontakt-antwort h4 {
  padding-top: 10vh;
}

/* ############# FOOTER ############# */
.footer {
  display: flex;
  justify-content: center;
}



/* Zusatz */
/* Fehlermeldung */
.notices.red {
  background: #bf7b81 !important;
}