/***************************************************************************************************
*** Typo
***************************************************************************************************/

@font-face { font-family: 'Oswald'; src: url('../fonts/oswald-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('../fonts/oswald-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('../fonts/oswald-bold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/***************************************************************************************************
*** General Styles
***************************************************************************************************/

a[type=button] { -webkit-appearance: none; }
::selection { background:var(--bs-primary); color:rgb(255,255,255); text-shadow:none; }
:active, :focus { outline: none !important; }
input::placeholder { font-size: 1.5rem; }
html, body { margin: 0; padding: 0; width: 100%; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: var(--bs-primary); }
body { position: relative; height: 100%; line-height: 1.5; -ms-word-wrap: break-word; word-wrap: break-word;
 /*
  background: url('/theme/public/assets/images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  */
}

a {
  transition: all 0.2s ease;
}

hr {
  height: 1px !important;
  color: var(--bs-primary);
  opacity: 1;
  width: 100%;
  margin: 3rem auto 0;
}

@media screen and (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}

/*** Bootstrap Dropdown-Caret ändern */
.dropdown-toggle::after {
  vertical-align: top;
  content: "\25BE";
  border: none;
  font-family: 'Oswald';
  margin: 0 0 0 0.25rem;
  line-height: 0;
  vertical-align: unset;
}

/***************************************************************************************************
*** Section
***************************************************************************************************/

section { padding: 4rem 2rem; }
@media(min-width: 768px){ section { padding: 4rem 0; } }
.section-bg-1 { background-color: var(--bs-primary); }
.section-bg-2 { background-color: var(--bs-secondary); }
.section-bg-3 { background-color: var(--bs-tertiary); }
.ptzero { padding-top: 0 !important; }
.ptsm { padding-top: 2rem !important; }
.ptxl { padding-top: 6rem !important; }
.pbzero { padding-bottom: 0 !important; }
.pbsm { padding-bottom: 2rem !important; }
.pbxl { padding-bottom: 6rem !important; }
.mtzero { margin-top: 0 !important; }
.mtsm { margin-top: 2rem !important; }
.mtxl { margin-top: 6rem !important; }
.mbzero { margin-bottom: 0 !important; }
.mbsm { margin-bottom: 2rem !important; }
.mbxl { margin-bottom: 6rem !important; }

/***************************************************************************************************
*** Navigation
***************************************************************************************************/
.main-menu-toggler {
  width: 50px;
  height: 60px;
  border: 0;
  border-radius: 0;
  font-size: 1.25rem;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjUuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgoJIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojQzQxMjE1O30KCS5zdDF7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI5Ljc5ODQ7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjEwMi40O30KPC9zdHlsZT4KPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiLz4KPHBhdGggY2xhc3M9InN0MSIgZD0iTTEwOC41LDE3NC4xaDI5NSBNMTA4LjUsMjU2aDI5NSBNMTA4LjUsMzM3LjloMjk1Ii8+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  margin-right: 0.75rem;
}
.nav-item:not(:last-child) { margin-right: 0.25rem;}
.nav-item .nav-link { background-color: rgba(0, 0, 0, 0.25); text-shadow: 1px 1px 0px rgb(0 0 0 / 50%) }

/***************************************************************************************************
*** Navigation (mobil)
***************************************************************************************************/
.mm-menu {
  --mm-color-background: var(--bs-secondary);
  --mm-color-text: rgb(255, 255, 255);
  --mm-color-button: rgb(255, 255, 255);
  --mm-color-text-dimmed: rgb(255, 255, 255);
  --mm-color-border: rgba(255, 255, 255, 0.5);
}

.mm-navbar a.mobile-logo { background-color: rgb(255, 255, 255); }

/*** Aufflackern der Mobile-Navigation beim Pageload vermeiden... ***/
#mobile-menu:not(.mm-menu) { display: none; }
/*** Title ausblenden ***/
.mm-navbar__title { display: none; }

.mm-navbar__title>span {
  overflow: visible !important;
  margin-top: 5px;
  letter-spacing: 0;
}

/* Geöffnetes Menü => Abdunkeln Wert überschreiben */
.mm-wrapper_opening [class*=mm-menu_pagedim].mm-menu_opened~.mm-wrapper__blocker {
  opacity: 0.8;
}

/* Geöffnete Submenüs => Styling */
#mm-2,
#mm-3 {
  background: #ede7e7;
  padding: 0 0 0 10px;
}

#mm-2 a,
#mm-3 a {
  color: rgb(77, 19, 15);
}

#mm-2 .mm-listitem__text,
#mm-3 .mm-listitem__text {
  padding: 5px 20px 5px 20px;
}

/*** Hintergrundbild ***/
#background {
  background: url('/theme/public/assets/images/typostudio-buschbeck-banner-background.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  height: 700px;
}
#background.bg-small {
  height: 200px;
}

/*** Logo + Claim ***/
header .navbar-brand { width: 90px; padding: 1rem 0 1.5rem; }
header h1.claim { font-size: 1.5rem; text-shadow: 2px 2px 0px rgb(0 0 0 / 40%); margin: 0; }
@media(min-width: 768px){ header .navbar-brand { width: 100%; } header h1.claim { font-size: 2rem; padding-left: 2.5rem; }}
@media(min-width: 1200px){ header h1.claim { font-size: 2.5rem; padding-left: 1rem; }}
@media(min-width: 1200px){ header h1.claim { padding-left: 2.5rem; }}
/*** Squares (Index-Boxen) ***/
.squares div { transition: 0.3s; }
.squares .creativ { background-color: rgba(166, 0, 117, 0.5) }
.squares .creativ:hover { background-color: rgba(166, 0, 117, 0.8) }
.squares .webdesign { background-color: rgba(255, 107, 0, 0.5) }
.squares .webdesign:hover { background-color: rgba(255, 107, 0, 0.8) }
.squares .konzeption { background-color: rgba(112, 177, 43, 0.5) }
.squares .konzeption:hover { background-color: rgba(112, 177, 43, 0.8) }
.squares .druck { background-color: rgba(33, 139, 135, 0.5) }
.squares .druck:hover { background-color: rgba(33, 139, 135, 0.8) }
.squares .fotografie { background-color: rgba(0, 0, 164, 0.5) }
.squares .fotografie:hover { background-color: rgba(0, 0, 164, 0.8) }
.squares .bildbearbeitung { background-color: rgba(246, 232, 0, 0.5) }
.squares .bildbearbeitung:hover { background-color: rgba(246, 232, 0, 0.8) }
.squares a { position: absolute; width: 100%; height: 100%; top: 50%; transform: translateY(-50%); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 300; font-size: 1rem; color: rgb(255, 255, 255); text-decoration: none; text-shadow: 2px 2px 0px rgb(0 0 0 / 40%); }
.squares a img { margin-bottom: 0.5rem; filter: drop-shadow( 2px 2px 0px rgba(0, 0, 0, .4)); }


.squares div:hover {
  transform: perspective(200px) rotateX(10deg);
  -webkit-box-shadow: 0 20px 20px rgb(0 0 0 / 20%) !important;
  -moz-box-shadow: 0 20px 20px rgba(0,0,0,0.2) !important;
  box-shadow: 0 20px 20px rgb(0 0 0 / 20%) !important;
  opacity: 1;
}

.squares div:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

/***************************************************************************************************
*** Bubbles (Hintergrund)
***************************************************************************************************/
.bubbles{position:fixed;width:100%;height:100vh;overflow:hidden;z-index:-2;}.bubble{position:absolute;left:var(--bubble-left-offset);bottom:-75%;display:block;width:var(--bubble-radius);height:var(--bubble-radius);border-radius:50%;animation:float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite}.bubble::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:inherit;animation:var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite}.bubble:nth-child(even)::before{background-color:rgba(0,0,0,.05);}.bubble:nth-child(odd){background:rgba(195,41,41,.05);}.bubble:nth-child(0){--bubble-left-offset:57vw;--bubble-radius:3vw;--bubble-float-duration:21s;--bubble-sway-duration:8s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(1){--bubble-left-offset:10vw;--bubble-radius:1vw;--bubble-float-duration:12s;--bubble-sway-duration:11s;--bubble-float-delay:1s;--bubble-sway-delay:1s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(2){--bubble-left-offset:42vw;--bubble-radius:10vw;--bubble-float-duration:15s;--bubble-sway-duration:8s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(3){--bubble-left-offset:41vw;--bubble-radius:4vw;--bubble-float-duration:22s;--bubble-sway-duration:11s;--bubble-float-delay:0s;--bubble-sway-delay:1s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(4){--bubble-left-offset:12vw;--bubble-radius:6vw;--bubble-float-duration:19s;--bubble-sway-duration:10s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(5){--bubble-left-offset:86vw;--bubble-radius:5vw;--bubble-float-duration:16s;--bubble-sway-duration:8s;--bubble-float-delay:0s;--bubble-sway-delay:1s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(6){--bubble-left-offset:51vw;--bubble-radius:1vw;--bubble-float-duration:12s;--bubble-sway-duration:10s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(7){--bubble-left-offset:54vw;--bubble-radius:2vw;--bubble-float-duration:19s;--bubble-sway-duration:10s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(8){--bubble-left-offset:59vw;--bubble-radius:8vw;--bubble-float-duration:20s;--bubble-sway-duration:10s;--bubble-float-delay:0s;--bubble-sway-delay:1s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(9){--bubble-left-offset:76vw;--bubble-radius:8vw;--bubble-float-duration:14s;--bubble-sway-duration:9s;--bubble-float-delay:0s;--bubble-sway-delay:0s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(10){--bubble-left-offset:14vw;--bubble-radius:4vw;--bubble-float-duration:15s;--bubble-sway-duration:11s;--bubble-float-delay:0s;--bubble-sway-delay:1s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(11){--bubble-left-offset:65vw;--bubble-radius:1vw;--bubble-float-duration:22s;--bubble-sway-duration:11s;--bubble-float-delay:1s;--bubble-sway-delay:1s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(12){--bubble-left-offset:39vw;--bubble-radius:3vw;--bubble-float-duration:18s;--bubble-sway-duration:9s;--bubble-float-delay:0s;--bubble-sway-delay:1s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(13){--bubble-left-offset:21vw;--bubble-radius:9vw;--bubble-float-duration:23s;--bubble-sway-duration:9s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(14){--bubble-left-offset:14vw;--bubble-radius:9vw;--bubble-float-duration:20s;--bubble-sway-duration:8s;--bubble-float-delay:1s;--bubble-sway-delay:1s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(15){--bubble-left-offset:98vw;--bubble-radius:5vw;--bubble-float-duration:19s;--bubble-sway-duration:9s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(16){--bubble-left-offset:88vw;--bubble-radius:3vw;--bubble-float-duration:18s;--bubble-sway-duration:9s;--bubble-float-delay:0s;--bubble-sway-delay:1s;--bubble-sway-type:sway-left-to-right}.bubble:nth-child(17){--bubble-left-offset:6vw;--bubble-radius:6vw;--bubble-float-duration:16s;--bubble-sway-duration:12s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(18){--bubble-left-offset:99vw;--bubble-radius:9vw;--bubble-float-duration:19s;--bubble-sway-duration:9s;--bubble-float-delay:0s;--bubble-sway-delay:1s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(19){--bubble-left-offset:76vw;--bubble-radius:6vw;--bubble-float-duration:23s;--bubble-sway-duration:11s;--bubble-float-delay:1s;--bubble-sway-delay:0s;--bubble-sway-type:sway-right-to-left}.bubble:nth-child(20){--bubble-left-offset:76vw;--bubble-radius:1vw;--bubble-float-duration:20s;--bubble-sway-duration:12s;--bubble-float-delay:1s;--bubble-sway-delay:1s;--bubble-sway-type:sway-right-to-left}@keyframes float-up{to{transform:translateY(-175vh)}}@keyframes sway-left-to-right{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes sway-right-to-left{from{transform:translateX(100%)}to{transform:translateX(-100%)}}.intro img { height: auto; object-fit: cover; object-position: bottom; }
.intro .intro-text { width: 100%; padding: 2rem; background-color: rgb(255, 255, 255); }
/*
@media(min-width: 576px){
  .intro .intro-text {
    padding: 3rem;
  }
}
@media(min-width: 768px){
  .intro { box-shadow: 0px 60px 80px rgb(0 0 0 / 20%) !important; }
  .intro .intro-text { width: 85%; bottom: -125%; padding: 4rem; box-shadow: 0px 60px 80px rgb(0 0 0 / 20%) !important; }
}
@media(min-width: 992px){
  .intro img { height: 400px; object-position: top; }
  .intro .intro-text { bottom: -75%; }
}
@media(min-width: 1200px){
  .intro img { object-position: 0 50%; }
  .intro .intro-text { bottom: -55%; }
}
*/

@media(min-width: 768px){
  .intro img { box-shadow: 0px 60px 80px rgb(0 0 0 / 20%) !important; }
  .intro .intro-text { width: 85%; margin: -20% auto 0; padding: 4rem; box-shadow: 0px 60px 80px rgb(0 0 0 / 20%) !important; }
}
/*
@media(min-width: 992px){
  .intro img { height: 400px; object-position: top; }
  .intro .intro-text { margin: -20% auto 0; padding: 4rem; }

}
*/