@charset "UTF-8";
/* CSS Document */

body {
	visibility: hidden; 
    background-color:#fff2;
    margin:0;
    padding:0;
    font-family:montserrat-regular;
	
}

@font-face {
    font-family: heurigenwirt;
    src: url(../fonts/heurigenwirt.ttf);
  }

  @font-face {
    font-family: Montserrat_regular;
    src: url(../fonts/montserrat_regular.ttf);
  }

  @font-face {
    font-family: OoohBaby_regular;
    src: url(../fonts/OoohBaby-Regular.ttf);
  }

  #loader-bg {
    position: fixed;
    z-index: 9999;
    top: 0; left: 0; height: 100vh; width: 100vw;
    background: #fff; display: flex; align-items: center; justify-content: center;
    flex-direction: column;
  }
  #loader-bar {
    width: 300px; height: 24px;
    background: #eee; border: 1px solid #ccc;
    margin-bottom: 10px; position: relative;
  }
  #loader-progress {
    background: #0a6;
    height: 100%; width: 0%;
    transition: width 0.3s;
  }

h1, h2, h3, h4 {
    font-family: heurigenwirt;
}

h1 {
    font-size:3.5rem;
    margin-bottom:30px;
    color:#6f5373;
    line-height:50px;
}

h2 {
    font-size:2.5rem;
    text-align:center;
    color:#6f5373;
}

p {
    font-family: montserrat_regular;
    color:#333333;

    
}

a {
    font-family: montserrat_regular;
    color:#666666;
    text-decoration:none;

}

label {
    font-family: montserrat_regular;
    color:#666666;
}

small {
    font-family: montserrat_regular;
    color:#666666;
    text-transform:uppercase;
}

.btn {
    font-family: montserrat_regular;
    color:#fff;
    background-color:#6f5373;
    border-color:#6f5373;
}

.btn:hover {
    background-color:#a883ad;
    border-color:#6f5373;
}


.abstand {
    margin-top:50px;
}



.kopfkontakt {
    text-align:center;
    margin: 20px 0;
}

.streifen_gelb {
    position:absolute;
    background-color:#f0d7aa;
    height:3.5vw;
    width:100%;
    bottom:0;
    left:0;
    z-index:-1;
}

.weinranke {
    background-image:url(../img/layoutbilder/weinranke_re.svg);
    background-repeat:no-repeat;
    background-position:right;
}

.weinranke_re {
    background-image:url(../img/layoutbilder/weinranke_li.svg);
    background-position:left;
}

.logo {
    max-width:500px;
}

.einstieg {
    margin-top:50px;
}

.detailtxt p {
    text-align:center;
}

.links p, .links h1 {
    text-align:right;
}





.footer {
    background-color:#f0d7aa;
    padding-top:50px;
    padding-bottom:15px;
    margin-top:30px;
}

.footerlogo {
    position:absolute;
    top:-70px;
    right:0;
    height:35px;
}

.footer-header {
    font-family: heurigenwirt;
    font-size:2.5rem;
    text-align:center;
}

.footer-subheader {
    font-family: montserrat_regular;
    text-align:center;
    line-height:1px;
    margin-bottom: 30px;
}

.footer-txt p {
    text-align:center;
}


/* --------------------------Inhalt-------------------------- */
.bildcontainer {
    width:100%;
    position:relative;
    margin-top:30px;
}

.rahmen {
    position:absolute;
    top:0;
    left:0;
    margin-top:-5px;
    margin-left:-5px;
    width:100%;
}

.rahmen img {
    object-fit:contain;
}

.hoch img {
    object-fit:cover;
}

.bild {
    background-repeat:no-repeat;
    background-size:contain;
    margin-bottom:35px;
}


.bildquer img {
    /* height:430px; */
}

.bildhoch {
    height:490px;
    width: 360px;
    background-size:cover;
    background-position:center;
}

.bildhoch img {
    /* height:490px;
    width:360px; */
    object-fit:cover;
}


.bildtextfeld {
    padding-top:30px;
    z-index:999;
}


.bildtextfeld h3 {
        font-family: OoohBaby_regular;
        font-size:21px;
        color:#1e2876;
}


.popup_content {
	margin-top:100px;
}

.popup_container {
    width:450px;
    background-color:#fff;
    border-radius:10px;
    padding:20px;
    padding-top:30px;
}

.popup_image {
    width:552px;
    position:absolute;
    top:-195px;
    left:50%;
    margin-left: -276px;
}

.popup_container h1 {
    text-align:center;
    padding-bottom:15px;
}

.popup_container p {
    text-align:center;
}

.svgschatten {
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}











/* RESPONSIVE Anpassungen */

/* X-Small */
@media screen and (max-width: 576px) {
    .weinranke {
        background-size:250px;
        background-position:right;
    }

    .weinranke_re {
        background-position:left;
    }


}

/* Small */
@media screen and (max-width: 768px) {

}

/* Medium */
@media screen and (max-width: 992px) {
    h1, h2, h3, p {
        text-align:center;
    }

    .links p, .links h1 {
        text-align:center;
    }

    label, small, .bttn {
        text-align:center;
    }

    .bildtextfeld a {
        text-align:center;
    }



}


/* Large */
@media screen and (max-width: 1200px) {

}

/* X-Large */
@media screen and (max-width: 1400px) {

}

/* XX-Large */
@media screen and (min-width: 1200px) {
    .streifen_gelb {
        height:50px;
    }

}

/* ===================================================
   MAV FORM – YForm / Formbuilder (Frontend)
   passt optisch zur Seite (Lato + Garamond, ruhige Cards, klare Inputs)
   =================================================== */

.mav-form{
  padding: clamp(36px, 5vw, 64px) 0;
}

.mav-form__content{
  max-width: 880px;
  margin: 0 auto;

  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 34px);

  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

/* Headline/Text innerhalb des Formular-Artikels */
.mav-form__content h1,
.mav-form__content h2,
.mav-form__content h3{
  margin-top: 0;
}

/* ===================================================
   YForm Basics (robust für unterschiedliche Markups)
   =================================================== */

.mav-form__content form{
  margin: 0;
}

.mav-form__content label{
  display: block;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: #111;
}

/* Helper / Hinweise */
.mav-form__content .help-block,
.mav-form__content .form-text,
.mav-form__content small{
  display: block;
  margin-top: 6px;
  color: rgba(17,17,17,.70);
  font-size: 13px;
  line-height: 1.4;
}

/* Abstände je Feldblock: funktioniert für viele YForm-Templates */
.mav-form__content .form-group,
.mav-form__content .form-control,
.mav-form__content .yform-field,
.mav-form__content .yform-fieldset,
.mav-form__content .yform-label,
.mav-form__content .yform-input{
  /* nicht alle existieren – safe */
}

.mav-form__content .form-group,
.mav-form__content .yform-field{
  margin-bottom: 16px;
}

.mav-form__content fieldset{
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

.mav-form__content legend{
  font-family: var(--font-head);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 10px;
}

/* ===================================================
   Inputs
   =================================================== */

.mav-form__content input[type="text"],
.mav-form__content input[type="email"],
.mav-form__content input[type="tel"],
.mav-form__content input[type="url"],
.mav-form__content input[type="number"],
.mav-form__content input[type="password"],
.mav-form__content input[type="date"],
.mav-form__content input[type="time"],
.mav-form__content input[type="datetime-local"],
.mav-form__content select,
.mav-form__content textarea{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid rgba(0,0,0,.14);
  background: rgba(17,17,17,.02);
  color: #111;

  border-radius: 14px;
  padding: 12px 14px;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.3;

  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.mav-form__content textarea{
  min-height: 140px;
  resize: vertical;
}

/* Placeholder */
.mav-form__content ::placeholder{
  color: rgba(17,17,17,.45);
}

/* Focus */
.mav-form__content input:focus,
.mav-form__content select:focus,
.mav-form__content textarea:focus{
  outline: none;
  border-color: rgba(107,127,103,.55); /* #6b7f67 */
  background: #fff;
  box-shadow: 0 0 0 4px rgba(107,127,103,.14);
}

/* Select Pfeil */
.mav-form__content select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(17,17,17,.65) 50%),
    linear-gradient(135deg, rgba(17,17,17,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* ===================================================
   Checkbox / Radio
   =================================================== */

.mav-form__content input[type="checkbox"],
.mav-form__content input[type="radio"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #6b7f67;
}

.mav-form__content .checkbox,
.mav-form__content .radio,
.mav-form__content .form-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
}

.mav-form__content .checkbox label,
.mav-form__content .radio label,
.mav-form__content .form-check label{
  margin: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(17,17,17,.90);
}

/* ===================================================
   Buttons (Submit/Reset) – im Stil deiner Pill Buttons
   =================================================== */

.mav-form__content button,
.mav-form__content input[type="submit"],
.mav-form__content input[type="button"],
.mav-form__content input[type="reset"]{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  padding: 0 18px;
  border-radius: 999px;

  font-family: var(--font-base);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: #fff;
  background: #6b7f67;

  transition: transform .18s ease, filter .18s ease, background-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.mav-form__content button:hover,
.mav-form__content input[type="submit"]:hover{
  background: #bed2b5;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
}

.mav-form__content input[type="reset"]{
  background: rgba(17,17,17,.10);
  color: #111;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,.12);
}

.mav-form__content input[type="reset"]:hover{
  background: rgba(17,17,17,.14);
  transform: translateY(-1px);
}

/* Button-Reihe/Abstand */
.mav-form__content .form-actions,
.mav-form__content .yform-submit,
.mav-form__content .btn-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* ===================================================
   Errors / Success
   =================================================== */

.mav-form__content .has-error label,
.mav-form__content .is-invalid{
  color: #9b1c1c;
}

.mav-form__content .has-error input,
.mav-form__content .has-error select,
.mav-form__content .has-error textarea,
.mav-form__content input.is-invalid,
.mav-form__content select.is-invalid,
.mav-form__content textarea.is-invalid{
  border-color: rgba(155,28,28,.45);
  box-shadow: 0 0 0 4px rgba(155,28,28,.12);
  background: #fff;
}

.mav-form__content .error,
.mav-form__content .help-error,
.mav-form__content .invalid-feedback{
  margin-top: 6px;
  color: rgba(155,28,28,.95);
  font-size: 13px;
  line-height: 1.35;
}

/* Meldungsboxen (je nach Template) */
.mav-form__content .alert{
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border: 1px solid rgba(0,0,0,.10);
}

.mav-form__content .alert-success{
  background: rgba(107,127,103,.10);
  border-color: rgba(107,127,103,.22);
}

.mav-form__content .alert-danger,
.mav-form__content .alert-error{
  background: rgba(155,28,28,.08);
  border-color: rgba(155,28,28,.20);
}

/* ===================================================
   Responsive
   =================================================== */

@media (max-width: 768px){
  .mav-form__content{
    border-radius: 16px;
  }

  .mav-form__content button,
  .mav-form__content input[type="submit"],
  .mav-form__content input[type="reset"]{
    height: 46px;
    font-size: 12px;
    letter-spacing: 1.6px;
  }
}