/*
Theme Name: Sparkasse-Mandantenshop
Author: fourplex GmbH
Version: 1.0
*/
@font-face {
  font-family: "Asap Condensed";
  src: url("./fonts/AsapCondensed-Regular.eot");
  src: url("./fonts/AsapCondensed-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/AsapCondensed-Regular.woff2") format("woff2"),
    url("./fonts/AsapCondensed-Regular.woff") format("woff"),
    url("./fonts/AsapCondensed-Regular.ttf") format("truetype"),
    url("./fonts/AsapCondensed-Regular.svg#AsapCondensed-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asap Condensed";
  src: url("./fonts/AsapCondensed-Bold.eot");
  src: url("./fonts/AsapCondensed-Bold.eot?#iefix") format("embedded-opentype"),
    url("./fonts/AsapCondensed-Bold.woff2") format("woff2"),
    url("./fonts/AsapCondensed-Bold.woff") format("woff"),
    url("./fonts/AsapCondensed-Bold.ttf") format("truetype"),
    url("./fonts/AsapCondensed-Bold.svg#AsapCondensed-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  list-style: none !important;
  font-family: "Asap Condensed" !important;
  scroll-behavior: smooth;
}

:root {
	--color0: #ffffff;
  --color1: #f5f5f5;
  --color2: #575656;
  --color3: #e2101e;
	--color4: #f5f5f5;
}
h1,
h2 {
  text-transform: uppercase;
  overflow: hidden;
	color: var(--color2)
}
h1 {
  font-size: 50px;
  font-weight: bold;
}
h1.product_title {
  font-size: 25px;
  font-weight: bold;
}
h3 {
  font-size: 25px;
	color: var(--color2)
}
p {
  color: var(--color2);
	font-size: 18px;
}
a {
  color: var(--color2);
}
a:hover {
  color: var(--color3) !important;
}
.fa-regular {
  font-family: "Font Awesome 6 Pro" !important;
  font-size: 2rem;
}
.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-size: 2rem;
}
.not-desktop {
  display: none;
}

.container-kla {
  height: 100px;
  padding: 0 200px;
}
.container {
  padding: 6rem 200px;
  height: auto;
}
.container-maxflat {
  padding: 0 200px !important;
}
.gap-bigger {
  gap: 45px;
}

.scrollDisable{
	overflow: hidden;
}

header {
  height: 150px;
}
#logout {
  width: 50% !important;
  background: none !important;
}
header div {
  width: 100%;
}
header div.flex.space-between {
  flex-direction: column;
  align-items: end;
  padding: 30px 0;
}
/* header div a img {
  width: 12.5% !important;
} */
header div.flex.space-between span.flex:last-child {
justify-content: end;
	align-items: baseline;
}
header div.flex.space-between span.flex:last-child a {
  font-size: 20px;
  font-weight: bold;
  text-align: end !important;
}
#social-media a {
  margin: 0 1rem;
}

#intro {
  height: 35vh;
}
#intro-text {
  height: auto;
  display: flex;
  flex-direction: column;
  margin-left: 200px;
  margin-right: -100px;
  z-index: 10;
}
#intro-text h1{
	color: var(--color3);
}
#intro-text p{
	font-size: 18px;
}
#logo-kunde {
  background: var(--color1);
}
#logo-kunde img {
  height: 30rem !important;
  object-fit: contain;
}


#hero{
	height: 75vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url("https://sparkasse-nuernberg.tagteam.de/wp-content/uploads/2023/09/A000140-Edit-Edit.jpg") no-repeat right/75%;
	background-color: #090A0B;
	position: relative;
}
#hero #tablet-banner, #hero #phone-banner{
	display: none;
}
#hero img{
	height: 125%;
	width: 100%;
	object-fit: cover;
}
#hero span{
		z-index: 10;
}
#hero span *:not(.red){
	color: var(--color1);
	padding-left: 200px;
}
#hero h2{
	margin-bottom: 1rem;
}
.red{
	color: var(--color3);
}

.overlay{
	height: 100%;
	width: 45%;
/* 	background: rgba(25, 25, 25, .8); */
}

.overlay div p, .overlay div h3, .overlay div h1{
	color: var(--color0);
}

.overlay div:first-child{
	width: 50%;
/* 	padding-left: 200px; */
	flex-direction: column;
	gap: 5rem;
}
.overlay div:last-child{
	width: 50%;
/* 	padding-right: 200px; */
	flex-direction: column;
}
.overlay div:last-child h1 span{
	background: #FF0000;
	padding: 0 6px;
}
.overlay div:last-child h1{
	font-size: 5rem;
}
.overlay img{
	width: 50vw;
}

#line{
	height: 2px;
	width: 200px;
	background: var(--color1);
	margin-top: 5rem;
}


#budget {
  height: 35vh;
}
div#budget-error {
  background: var(--color3);
  color: var(--color1);
  padding: 2rem;
  text-decoration: underline;
}

#note{
	position: sticky;
	top: 100px;
	background: var(--color1);
	display: flex;
}
#note p{
	width: fit-content !important;
}
#note p.red{
	font-weight: bold;
}
#note.container{
	padding: 10px 225px;
}

nav, #note {
  z-index: 20;
}

nav ul {
  padding: 0 !important;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: bold;
}
nav ul li a {
  color: var(--color2) !important;
}
nav .counter {
  height: 25px;
  width: 25px;
  transform: translate(20px, 15px) scale(1);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color3);
  color: var(--color1);
  font-weight: bold;
	transition: animation ease-in-out;
}

@keyframes pulse{
	0%{
		transform: translate(20px, 15px) scale(1);	
	}
	15%{
		transform: translate(20px, 15px) scale(1.75);	
	}
	75%{
		transform: translate(20px, 15px) scale(1.75);	
	}
	100%{
		transform: translate(20px, 15px) scale(1);	
	}
}

.pulse{
	animation: pulse 1.5s ease-in-out;
}

nav a.flex {
  flex-direction: row;
  margin-right: 1rem;
}

.versandkostenfrei{
	white-space: nowrap;
	color: var(--color2);
}

.woocommerce-message {
  white-space: nowrap;
  font-size: 15px;
  margin: 0;
  padding: 0 0 1rem 200px;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color1);
}
#product-nav {
  height: 50px;
  padding-left: 10px;
  background: var(--color1);
  color: var(--color2);
  font-weight: bold;
}
#product-nav h3 {
  text-transform: uppercase;
}



.grid {
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)) !important;
  grid-template-rows: repeat(auto-fill, minmax(750px, 1fr));
  margin-bottom: 10rem;
}

.item{
	height: fit-content;
}

.item img {
  object-fit: contain !important;
}

#separator-banner{
	grid-row: 2/3;
	grid-column: 1 / span 2;
	height: 250px;
	background: lightgrey;
	margin: 50px 0;
}




.box {
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  cursor: pointer;
}
.box p:last-child {
  padding-bottom: 1.5rem;
}
.box ul {
  line-height: 1.25rem;
  padding: 5px 20px;
}
.box ul li{
		list-style: square !important;
	margin: 10px 0;
}
.open--box {
  height: auto;
  transition: all 1s ease-in-out;
}

.variations_form tbody{
	display: flex;
	justify-content: space-between;
}

div.coupon,
th.label,
span.posted_in {
  display: none !important;
}
a.checkout-button.button.alt.wc-forward.wp-element-button,
button#place_order {
  background: var(--color3) !important;
  color: var(--color1) !important;
}
td.value {
  padding: 0;
  width: 150px;
}

form.variations_form.cart.has-gzd-variation-form tr{
	width: 100%;
}

p.price {
    font-weight: bold;
}

select#farbe,
select#groesse,
input[type="number" i] {
  background: var(--color1);
  border: none;
  margin-top: 1rem;
  -webkit-appearance: none;
}


select#farbe,
select#groesse,
button.single_add_to_cart_button.button.alt.wp-element-button {
  width: 100%;
}

input, select, textarea{
	padding: 1.5rem !important;
}

.item form .quantity input{
	display: none;
}
button.single_add_to_cart_button {
  background: var(--color3) !important;
  font-size: 20px;
  border: none;
  color: var(--color1);
	margin: 1rem 0;
	width: 100%;
}

a.reset_variations{
	display: none !important;
}

a.added_to_cart.wc-forward{
	margin-left: 6px;
	color: green;
	animation: fadeOut 3s linear;
	opacity: 0;
}


#order_review {
	display: flex;
	flex-direction: column;
}

.shop_table.woocommerce-checkout-review-order-table {
	order: 1;
}
h3#order_payment_heading {
	order: 2;
}
#payment {
	order: 3;
}
.ppcp-messages {
	order: 4;
}
.ppc-button-wrapper {
	order: 5;
}
#order_review .wc-gzd-checkbox-placeholder {
	order: 6;
}
.wc-gzd-order-submit {
	order: 7;
}





@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	75%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

span.sku_wrapper {
	/*
  display: flex;
  gap: 6px;
	*/
	display: none;
}

.woocommerce {
  margin-top: 10rem;
	color: var(--color2);
}

tr.order-total {
    text-decoration: underline;
	font-weight: bold;align-content
}
#payment{
	background: var(--color0) !important;
}
#payment img{
	max-height: 52px;
	width: auto;
}
.payment_box.payment_method_cod{
	background-color: var(--color0) !important;
}
.cart-collaterals {
  margin: 2rem 0;
}

.cart-collaterals .ppc-button-wrapper {
	display: none;
}

.woocommerce .cart-collaterals .cart_totals{
	float: left !important;
}
.woocommerce table.cart img {
  height: 5rem !important;
  object-fit: contain;
}

input.select2-search__field{
	background: none;
	padding-left: .5rem !important;
}


.woocommerce form .form-row input.input-text,
textarea {
  background: none;
  border: 1px solid var(--color2);
}

footer {
    background-image: url("https://sparkasse-nuernberg.klamottenalarm.de/wp-content/uploads/2023/10/cloth_texture_red@3x.jpg");
  background-size: 25px 25px;
}

footer p,
footer a, footer h3 {
  color: var(--color4);
}
footer div a img {
  height: 50%;
  width: clamp(200px, 20dvw, 450px);
}
footer div div {
  margin: 2.5rem 0;
}
footer div div i {
  color: var(--color4);
}
footer a:hover {
  color: var(--color1) !important;
}

.additional-nav-anchor{
	font-size: 25px;
	font-weight: 700;
}

#checkout-siegel{
	height: 50px !important;
	width: 50px !important;
	display: inline-block;
}

.form-row.place-order.wc-gzd-place-order::after{
	content: "";
	display: inline-block !important;
	height: 125px;
	width: 125px;
	background: url("https://sparkasse-nuernberg.klamottenalarm.de/wp-content/uploads/2023/06/Siegel-fuer-Website-.png") no-repeat center/contain;
	float: right;
}


table.cart input[type=number].input-text.qty{
	padding: 1rem 0 !important;
}
table.cart td.product-remove a.remove{
	padding: 0 !important;
}


/* RESPONSIVENESS */
@media screen and (min-width: 2000px) {
	.overlay div:first-child{
		width: 40%;
	}
	.overlay div:first-child p{
		font-size: 22px;
	}
	.overlay div:last-child{
		width: 60%;
	}
	.overlay div:last-child h1{
		font-size: 7.5rem;
	}
	.overlay div:last-child img{
		width: 75rem;
	}
}
@media screen and (max-width: 1920px){
	.container {
  padding: 6rem 100px;
  height: auto;
}
}

@media screen and (max-width: 1200px) {
  /* * {
    overflow-x: hidden;
  } */
	#note{
		text-align: center;
	}
	
  .not-desktop {
    display: block;
  }
  .not-mobile {
    display: none !important;
  }
  h2 {
    font-size: 35px;
  }
  h4{
	font-size: 18px ;
  }
  .container {
    padding: 1.5rem !important;
  }
  .container-kla {
    height: auto;
    padding: 2.5rem 1rem;
  }
  .container-maxflat {
    padding: 2rem !important;
    height: auto;
  }
	
	header.container-maxflat{
		padding: 0 2rem !important;
	}

  header div.flex.space-between {
    align-items: start;
  }
  header div.flex.space-between span.flex:last-child a {
    text-align: start !important;
    height: 2rem;
  }
  #social-media {
    height: 3rem;
  }
	#hero{
		flex-direction: column-reverse;
	}
	#hero span{
		position: absolute;
    	bottom: 0;
		width: 100%;
		padding: 2rem 0;
		text-align: center;
		background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	}
	
	#hero #desktop-banner,#hero #phone-banner{
		display: none;
	}
	#hero #tablet-banner{
		display: block;
		height: auto;
		width: 100%;
	}
	#hero span * {
		padding-left: 0px
	}
	

  section#intro {
    height: auto;
  }
  section#intro #intro-text {
    margin: 0;
    padding: 2rem;
  }
  section#intro #logo-kunde img {
    height: 60% !important;
  }
  section#budget {
    height: auto;
    justify-content: center;
  }
	
	.overlay div:first-child{
		width: 100%;
		padding-left: 0;
	}
	.overlay div:last-child{
		width: 100%;
		padding-right: 0;
	}
	.overlay {
		justify-content: space-around;
		text-align: center;
	}

  .woocommerce nav.woocommerce-MyAccount-navigation {
    height: auto !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation ul {
    margin: 0 !important;
  }
  nav {
    height: 2rem !important;
    overflow: hidden;
  }
  nav ul li {
    overflow: hidden;
    margin: 1rem 0;
    height: auto;
  }
  nav ul {
    margin-top: 5rem;
  }
  nav div.flex.align-center.gap.not-mobile {
    display: flex;
  }
  .flex.gap.align-center.not-desktop.absolute {
    height: 4rem;
  }
  .flex.gap.align-center.not-desktop.absolute a.flex {
    height: 100%;
  }
  .flex.not-desktop.absolute {
    display: flex;
    flex-direction: row !important;
    top: 30px;
    left: 27%;
  }

  #burger {
    height: auto;
    width: auto;
    top: 60px;
    left: 2rem;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }
  #burger div {
    height: 5px;
    width: 35px;
    background: red;
  }
  #burger div:nth-child(2) {
    margin: 5px 0;
  }
  .open-burger {
    transform: translateY(-50%) rotate(90deg) !important;
  }
  .open-burger-menu {
    height: auto !important;
  }

  .woocommerce-message {
    padding: 0 1rem;
    flex-direction: column;
    align-items: start;
    white-space: pre-wrap;
  }

	
  .item .box p.flex{
	flex-direction: row !important;
  }
  #product-nav {
    justify-content: center;
  }
	
  td.value {
    display: flex;
    flex-direction: column;
  }
	
	form.variations_form.cart.has-gzd-variation-form tr{
		width: 50%;
	}

  .woocommerce {
    margin-top: 2rem;
  }

  footer div div {
    flex-direction: row !important;
  }
}

/* @media screen and (max-width: 850px) {
	header.container-maxflat {
		padding: 50px 2rem !important;
	}
	#hero #desktop-banner,#hero #tablet-banner{
		display: none;
	}
	#hero{
		flex-direction: column-reverse;
	}
	#hero span{
		width: 100%;
		
		padding: 2rem;
		text-align: center;
		top: 0 !important;
	}
	
	#hero #phone-banner{
		display: block;
		height: 100%;
		width: auto;
		margin-bottom: -193px;
}
	}
	#hero span * {
		padding-left: 0px;
	}
} */


@media screen and (max-width: 820px) {
	header.container-maxflat {
		padding: 2rem !important;
	}
	#hero #desktop-banner,#hero #tablet-banner{
		display: none;
	}
	#hero span{
		display: none;
	}
	
	#hero #phone-banner {
		display: block;
		height: 100%;
		position: relative;
/* 		left: 85px; */
	}
	#hero span * {
		padding-left: 0px;
		transform: scale(0.65);
	}
	
	.overlay div{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.overlay div:first-child p{
		padding: 0 30px;
	}
	.overlay div:last-child h1{
		font-size: 3rem;
	}
	.overlay img{
		width: 25rem;
	}
	
	#line{
		width: 100px;
		background: var(--color1);
		margin-top: 2rem;
	}
	
	#note.container{
		padding: 0 1rem !important;
	}
	.versandkostenfrei{
		white-space: normal;
	}
}