:root{
    --pr: #f2eee3;
    --se: #efe7d0;
    --ac-l: #d59a08;
    --ac-d: #604729;
    --txt: #5a514c;

    --page-padding: 0 1em;
    --adjust-margin: calc(50px + 6vw);
}


@font-face {
    font-family: 'hero-font';
    src: url('../fonts/Anton-Regular.ttf');
}

@font-face {
    font-family: 'kreide';
    src: url('../fonts/Norican-Regular.ttf');
}

@font-face {
    font-family: 'heading';
    src: url('../fonts/Lobster-Regular.ttf');
}


html{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body{
    margin: 0;
    padding: 0;
    background-color: var(--pr);
    overflow-x: hidden;
}
*{
    outline: none;
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "Open Sans", sans-serif;
}

main{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.mw{
    width: 100%;
    max-width: 1400px;
}


section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3em;
    position: relative;
}
.holder{
    display: flex;
    align-items: center;
    gap: 2em;
    padding: 0 1em;
    margin-bottom: 50px;
}
.reverse{
    flex-direction: row-reverse;
}

h1,
h3{
    font-family: 'heading', sans-serif;
    color: var(--ac-d);
    font-size: 3rem;
    font-weight: 900;
    margin-top: 50px;
    line-height: 1.1;
    text-align: center;
    padding: 0 16px;
}

h5 {
	font-size: 1rem;
}
.adjust-h3{
    padding-top: 6vw;
}
.txt-holder{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.txt-holder span,
.txt-wrap span{
    font-size: calc(1.1rem + .2vw);
    font-weight: 700;
    color: var(--txt);
    line-height: 1.5;
}
.txt-holder p,
.txt-wrap p,
.txt-wrap a{
    font-size: calc(1.1rem + .2vw);
    color: var(--txt);
    line-height: 1.5;
}
.txt-wrap p{
    margin-top: 1em;
}


.img-align-box-holder{
    padding: var(--page-padding);
    margin-bottom: var(--adjust-margin);
    flex-direction: column;
    gap: 0;
}

.img-align-box{
    width: 100%;
    height: max-content;
    padding: 1em 0;
    border-top: solid 1px var(--ac-d);
    margin: 0 auto;
}
.img-align-box:last-of-type{
    border-bottom: solid 1px var(--ac-d);
}
.img-align-box .img-holder{
    width: 40%;
    aspect-ratio: 1/1;
    min-width: 110px;
    max-width: 200px;
    height: max-content;
    float: left;
    margin-right: 16px;
}
.img-align-box .img-holder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}




@media(max-width: 650px){
    .img-align-box-sec h3{
        margin-top: var(--adjust-margin);
    }
}

@media(max-width: 700px){
	h1,
    h3{
        font-size: calc(1.7rem + 1vw);
    }
    .txt-holder span,
    .txt-wrap span,
    .txt-holder p,
    .txt-wrap p,
	.txt-wrap a{
        font-size: 1.05rem;
    }
}



.btn-holder{
    display: flex;
    align-items: center;
    gap: 1em;
}
.btn{
    width: max-content;
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s;
}
.vanish{
	display: none !important;
}
.btn-l{
    background-color: var(--ac-l);
    color: #4B3720;
}
.btn-d{
    background-color: var(--ac-d);
    color: var(--pr);
}
.btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 5px 10px var(--txt);
}
.contact{
    transition: filter .2s;
    height: 60px;
    width: max-content;
    cursor: pointer;
}
.contact img{
    height: 100%;
    width: auto;
}
.contact:hover{
    filter: brightness(90%);
}

.transition{
    aspect-ratio: 1920/144;
    min-width: 100%;
    width: 102%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
}
.tl{
    background-image: url(https://privatbrauerei-laase.de/wp-content/uploads/2025/06/transition-light.svg);
}
.td{
    background-image: url(https://privatbrauerei-laase.de/wp-content/uploads/2025/06/transition-dark.svg);
}
.tt{
    transform: translateY(2px) scaleX(1) scaleY(1);
    bottom: 100%;
}
.tb{
    transform: translateY(-2px) scaleX(-1) scaleY(-1);
    top: 100%;
}
.hero-transition{
    bottom: 0;
    transform: translateY(2px) scaleX(1) scaleY(1);
}
.footer-transition{
    transform: translateY(2px) scaleX(1) scaleY(1);
    bottom: 100%;
    background-image: url(https://privatbrauerei-laase.de/wp-content/uploads/2025/06/transition-braun.svg);
}



.card{
    position: relative;
    width: 100%;
    height: max-content;
    background-image: url("https://privatbrauerei-laase.de/wp-content/uploads/2025/06/brett.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    box-shadow: 0 0 10px var(--txt);
}
.card-nagel{
    position: absolute;
    top: -25px;
    left: 50%;
    height: 40px;
    width: max-content;
}
.card-nagel img{
    height: 100%;
    width: auto;
}
.card-ranke{
    position: absolute;
    top: -5%;
    left: -30px;
    height: 100%;
    width: max-content;
}
.card-ranke img{
    height: 90%;
    width: auto;
    max-height: 200px;
}

.card-img-holder{
    width: 30% !important;
    min-width: 100px !important;
    max-width: 200px !important;
    float: left !important;
    height: max-content !important;
    position: relative !important;
    margin-right: 16px !important;
}
.card-img-wrapper{
    position: relative;
    width: 100%;
    height: max-content;
}
.papier{
    width: 100%;
    height: auto;
}
.card-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70% !important;
    aspect-ratio: 1/1;
	object-fit: cover;
}

.zettel p{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ac-l);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}


.card-txt{
    padding: 1em 0;
    margin-bottom: 40px;
}

.card-txt span{
    color: var(--pr);
    text-shadow: 0 0 3px var(--txt);
}
.card-txt p {
    color: var(--pr);
    text-shadow: 0 0 3px var(--txt);
    padding: 0 1em;
}

@media(max-width: 600px){
    .card-txt p{
        padding: 0 10px;
    }
    .card-img-holder{
        margin-right: 0;
    }
}




/* Kontaktformular */


.kontakt-main{
    margin-top: 10rem;
    margin-bottom: 15rem;
}


.kontakt-holder{
	background-color: var(--ac-l)
}
.kontakt{
	margin-top: 3em;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2em;
	padding: var(--padding);
	z-index: 3;
}
.kontakt-text{
	width: 100% !important;
}


.wpcf7{
	max-width: 382px;
}
.wpcf7-form{
    display: flex;
    flex-direction: column;
	align-items: center;
	justify-content: center;
    width: clamp(265px, 100%, 382px);
    margin:  0;
	gap: 10px;
}
.formula{
    display: flex;
    flex-direction: column;
    gap: 10px;
	padding: var(--page-padding);
}
form p{
    width: 100%;
}
label{
    color: var(--ac-l);
    font-size: 1.15rem;
    font-weight: 900;
}
form input{
    width: 100%;
    height: 2em;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ac-d);
    padding: 2px 5px;
	border-radius: 5px;
    border: solid 1px var(--ac-d);
	outline: 0;
	border: 0;
	background-color: var(--se);
}
form input:focus,
form textarea:focus{
    outline: 0;
}
textarea{
    width: 100%;
    resize: none;
    height: 5em;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ac-d);
    padding: 2px 5px;
	border-radius: 5px;
    border: solid 1px var(--ac-d);
	outline: 0;
	border: 0;
	background-color: var(--se);
}



.checkbox{
    height: 1em;
    width: 1em;
}

label:nth-of-type(5){
    display: flex;
    gap: 10px;
}


.wpcf7-form-control-wrap{
    height: max-content;
}
.wpcf7-list-item{
    width: 100%;
    margin: 0;
}
.wpcf7-list-item-label{
    color: var(--txt-ld);
    font-size: 1rem;
    font-weight: 500;
    width: calc(100% - 2em);
}

.formula p:nth-of-type(6){
    display: flex;
    position: relative;
}


.wpcf7-submit{
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ac-d);
    background-color: var(--ac-l);
	outline: 0;
	border: 0;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: .2s;
    text-wrap: nowrap;
    width: 100%;
    height: 2.5em;
	margin-top: 1em;
}
.wpcf7-submit:hover{
	transform: translateY(-5px);
    transition: .4s;
}


.wpcf7-response-output{
    color: var(--bg);
	margin: 0 !important;
}



/* Kontaktformular Ende */

/* DSGVO */


.impressum{
	text-align: center;
}
.dsgvo,
.impressum{
    margin-top: 160px;
    margin-bottom: var(--adjust-margin);
    padding: var(--page-padding);
    display: flex;
    flex-direction: column;
}
.dsgvo h1,
.impressum h1{
	margin-top: 0;
	margin-bottom: 50px;
	padding: 0;
}
.dsgvo h2,
.impressum h2{
	color: #d59a08;
	font-size: 1.2rem;
}
.impressum h2{
	margin-top: 20px;
}

.dsgvo h4{
	color: var(--txt);
}
.dsgvo h5 {
	color: var(--txt);
}
.dsgvo ul {
    color: var(--txt);
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 !important;
}

.dsgvo ul li {
    color: var(--txt-1) !important;
    font-size: calc(1.1rem + .2vw);
	padding: 0 15px;
	display: flex;
	gap: 10px;
}

@media(max-width: 700px){
	.dsgvo ul li {
		font-size: 1.05rem;
	}
}

@media(max-width: 500px){
	.dsgvo,
	.impressum{
		margin-top: 100px;
	}
}