/* ------------------------------------------------ 
	REGISTER iframe inside
	------------------------------------------------ */	
    .iframe-wrapper {
        width: 100%;
       /* height: calc(100vh - 6rem);*/
        height: calc(1200px - 3rem);
        overflow: hidden;
        position: relative;
    }
    #shopFrame {
        width: 100%;
        border: none;
        height: calc(100% + 6rem);
        margin-top: -6rem;
    }
    @media only screen and (max-width: 1440px) { 	
        .iframe-wrapper {
            height: 1200px;
        }
	}

    /*loader script*/
    #shop-react {display: none; }


    /* ----- NEW STYLE -> after broken shop-style ----- */
    /*styles*/
    /*.app section strong {font-weight: 600;}*/
    .app section form h2 {padding-bottom: .5rem;}
    .app section .row {padding: 5px 0; }
    .app section .col-centered {margin: auto;} 
    .app section .text-right {text-align: right;}
    .app section .pcv-section-spacing {margin-top: 0;}

    /* fonts */
    .app section h1, .app section .h1,
    .app section h2, .app section .h2,
    .app section h3, .app section .h3 {
      font-family: 'Roboto_Light','Helvetica','Arial',sans-serif;
    }

    form :is(p, small, input, textarea, textarea::placeholder) {
      font-family: 'Roboto_Regular','Helvetica','Arial',sans-serif;
    }
    form :is(button),
    form.sent .error-output,
    table#pcv-order-table thead th,
    .app section h4, 
    .app section h5,
    .app section b, 
    .app section strong {
       font-family: 'Roboto_Medium','Helvetica','Arial',sans-serif;
       font-weight: 500; 
    }

    .app section {
        font-size: 1rem; 
        line-height: 1.45rem;  
    }

    form :is(p, label, input, textarea, .error-output) {
        font-size: 1.05rem;
    }
    .app section .input-checkbox label, 
    .app section .input-radio label,
    form :is(.i-label, .pcv-form-error-message ) {
        font-size: 1em;
    }

    .app section label {
        font-size: .9rem;
    }

    .grid-list .small,
    .app section .small {
        font-size: .85rem; 
    }

    .app section h2, .app section .h2 {
      font-size: 2.35714286em;
      line-height: 1.36363636em;
      margin-bottom: .78787878787879em;
    }
    .app section h3, .app section .h3 {
      font-size: 1.78571429em;
      line-height: 1.5em;
      padding-bottom: 0;
    }

    /*.col-sm*/
    .col-sm-12 { width: 100%;  }
	.col-sm-11 { width: 91.66666666666666%; }
	.col-sm-10 { width: 83.33333333333334%; }
	.col-sm-9 { width: 75%; }
	.col-sm-8 { width: 66.66666666666666%; }
	.col-sm-7 { width: 58.333333333333336%; }
	.col-sm-6 { width: 50%; }
	.col-sm-5 { width: 41.66666666666667%; }
	.col-sm-4 { width: 33.33333333333333%; }
	.col-sm-3 { width: 25%; }
	.col-sm-2 { width: 16.666666666666664%; }
	.col-sm-1 { width: 8.333333333333332%; }

    /*.col-md*/
    .col-md-4 {width: 33.33333333%;}
    .col-md-8 {width: 66.66666667%;}
    .col-md-12 {width: 100%;}

     @media (min-width: 992px) {
        .col-md-push-8 {left: 66.66666667%;}
        .col-md-pull-4 {right: 33.33333333%;}

        .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
            float: left;
            position: relative;
        }
    }

    /*.col*/
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
          position: relative;
          min-height: 1px;
          padding-left: 15px;
          padding-right: 15px;
    }

    div[class*="col-"] > form.pcv-form-shop div[class*="col-"]:first-child:nth-last-child(2) {
        padding-left: 15px;
    }
    div[class*="col-"] > form.pcv-form-shop div[class*="col-"]:last-child:nth-child(2) {
        padding-right: 15px;
    }

    /*boxed*/
    .boxed:not(:last-child) {margin-bottom: 30px;}
    .boxed.boxed--border {border: 1px solid #ececec;}
    .boxed.boxed--sm {padding: 1.23809524em;}
    .boxed.boxed--lg {padding: 2.78571429em;}
    .boxed {
        border-radius: 6px;
        position: relative;
        overflow: hidden;
        padding: 1.85714286em;
        margin-bottom: 30px;
    }

     /*span H*/
    .app section span.h1:not(.inline-block), 
    .app section span.h2:not(.inline-block), 
    .app section span.h3:not(.inline-block), 
    .app section span.h4:not(.inline-block), 
    .app section span.h5:not(.inline-block), 
    .app section span.h6:not(.inline-block) {display: block;}


    /*input, select, textarea*/
    .app section input[type], 
    .app section select, 
    .app section textarea {padding-left: .92857143em;}

    /*border*/
    .app section form select,
    .app section form :is(input, textarea),
    .app section form select { 
        border: 1px solid #bbb;
        border-radius: 6px;
    }
    .app sectionform :is(input, textarea).pcv-form-error { 
        border: 1px solid #E15257; 
    }

    /*checkbox*/
    .app section .input-checkbox-group > div {padding: .5rem 0}
    .app section .input-checkbox label {display: none;  }
    .app section .input-checkbox span {vertical-align: top; }
    

    /*button primary*/
    .app section .btn {position: relative;}
    .app section .btn:last-child {margin-right: 0;}
    .app section .btn:first-child {margin-left: 0;}
    .app section .btn--primary {
      color: #fff;
      font-weight: 700;
    }
    .app section .btn--primary, 
    .app section .btn--primary:visited {
      background: #f0aa00;
      border-color: #f0aa00;
    }
    /*button outline*/
    .app section .btn.pcv-btn-outline {background: #fff;}

    /*links*/
    .app section a, 
    .app section span a, 
    .app section label a {
       text-decoration: underline;
       color: #f0aa00;
       font-weight: 700;
    }

    /* SECTION -> RICING */
    .pcv-pricing {
        position: relative;
        margin-bottom: 20px !important;
    }
    .pricing {
        transition: 0.3s ease;
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        position: relative;
    }
    .pricing:hover {box-shadow: 0 0 25px 0 rgba(0,0,0,.16)!important;}

    .pricing .h2 {margin-bottom: .3939393939394em;}
    .pricing-1 .btn:last-child {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        border-radius: 0 0 6px 6px;
        padding: .92857143em 0;
        margin: 0;
        text-align: center; 
    }

    /* SECTION -> ZUSAMMENFASSUNG */
    .terms-conditions {margin-top: 2rem }

    .app section .pcv-consent {display: block;}
    .app section .pcv-consent input {
        float: left !important; 
        margin: .2rem 0 2rem 0;
    }
    .app section .pcv-consent .pcv-consent-txt {
        display: block;
        line-height: 1.5em;
    }

    /* ----- end NEW STYLE ----- */

	/* ------------------------------------------------ 
	SHOP FORM
	------------------------------------------------ */	
    form {width: 100%;}
    form .col,
    form .inline {vertical-align: top;}

    /*margin, padding*/
    form .inner-section {padding-bottom: 3rem; }
    form h2 {padding-bottom: 1rem;}
    form p {padding-bottom: .5rem;}

    form :is(input, textarea, select) {margin: 5px 0;}
    form .i-label {margin-top: .75rem;}
    
    .pad-0-top { padding-top: 0; }
    .pad-1-top { padding-top: 1rem; } 
    .pad-2-top { padding-top: 2rem; } 
    .pad-3-top { padding-top: 3rem; } 
    .pad-0-bottom { padding-bottom: 0; } 
    .pad-1-bottom { padding-bottom: 1rem; } 
    .pad-2-bottom { padding-bottom: 2rem; } 
    .pad-3-bottom { padding-bottom: 3rem; } 
    .pad-0-right { padding-right: 0; } 
    .pad-1-right { padding-right: 1rem; } 
    .pad-2-right { padding-right: 2rem; } 
    .pad-3-right { padding-right: 3rem; } 
    .pad-0-left { padding-left: 0; }
    .pad-1-left { padding-left: 1rem; } 
    .pad-2-left { padding-left: 2rem; } 
    .pad-3-left { padding-left: 3rem; } 
    
    /*input, textarea*/
	form :is(input, textarea) {
		width: 100%;
		outline: 0;
		vertical-align: middle;
        padding: .8rem 1.2rem; 
        transition: .2s ease all;
		-moz-transition: .2s ease all;
		-webkit-transition: .2s ease all;
	}
    
    /* on focus, on hover*/
    form :is(input[type], textarea, select):focus {
        border-color: #f0aa00;
        background: #fff; 
    }
    
    form :is(input, textarea):hover,
    form input[type="checkbox"]:hover {background: #f4f4f4; }

    /* cta-button */
	form button,
    form .submit input,
    form #submit input {
        display: inline-block;
        color: #fff;
        letter-spacing: 0.46px;
        text-transform: uppercase;
        cursor: pointer;
        
        background: #f0aa00;
        border: 2px solid #f0aa00;
        padding: .45em 1em;
        border-radius: 6px;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
        
        transition: .2s ease all;
        margin: .5rem 0;
        font-size: 1rem;
    }

    form .normal { text-transform: none; }
    form .small { font-size: .9rem; }
    form .outline { background: none; color: #f0aa00; }
    form .link { 
        background: transparent; 
        color: #f0aa00; 
        padding: 0;
        border: 0;
        border-radius: none;
        text-decoration: underline; 
    }

    /*hover*/
    form button:hover,
    form #submit:hover input { 
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; 
    }
    form button.link:hover,
    form #submit.link:hover input {
        box-shadow: none;
        color: #393A42;
    }

    /*line-height*/
    form :is(p, label, .error-output ) {
         line-height: 1.45rem; 
    }
    form small {
        line-height: 1.35rem;
    }
    form :is(.pcv-form-error-message, .i-label) {
        line-height: 1rem;
        margin-top: .2rem;
    }

    /*color*/
    form textarea::placeholder {color: gray;}
    
    /*table, labeltext*/
    form label {
        display: block; 
        margin: 0 0 .5rem;
    }

    form tabel, 
    form th, 
    form td {
        margin: 0px;
        padding: 0px;
    }
    form th, 
    form td { 
        font-size: 1.05rem;
        display: block;
        line-height: 1.4rem;
        text-align: left;
        font-weight: 400;
    }
    form tfoot { 
      margin-top: .5rem;
      display: block; 
    }

    /* ----- DROPDOWN  SELECT ---- */
    form select {
        width: 100%;   
        background-color: white;  
        padding: .8rem 1.2rem;

        box-sizing: border-box;     /* ensures padding fits inside width */
        appearance: none;           /* remove default browser arrow (optional) */
        -webkit-appearance: none;
        -moz-appearance: none;

        background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 10,0 5,6"/></svg>');
        background-repeat: no-repeat;
        background-position: right 0.5em center;
        background-size: 0.65em auto;
        padding-right: 2em; /* make space for the arrow */
    }
   

    /* ----- RADIOBUTTON (TAGESZEIT) not-in-use ---- */
    /* reset + base style */
    .radio-wrapper { margin: .5rem 0;}
    form input[type="radio"] {
      all: unset;
      display: inline-block;
      position: relative;

      width: 22px;
      height: 22px;
      min-width: 22px;
      max-width: 22px;

      flex: 0 0 22px;
      box-sizing: border-box;

      border: 2px solid #bbb;
      border-radius: 50%; /* circle */
      background-color: #fff;

      cursor: pointer;
      margin-right: 10px;
      transition: .2s ease all;
    }

    /* checked state */
    form input[type="radio"]:checked {border-color: #ffb80b;}

    /* inner dot */
    form input[type="radio"]:checked::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;

      width: 10px;
      height: 10px;
      background-color: #ffb80b;
      border-radius: 50%;

      transform: translate(-50%, -50%);
    }

    form .radio-wrapper .input-radio {
      display: flex;
      align-items: center;
      line-height: 1;
      cursor: pointer;
    }

    form input[type="radio"]:hover {border-color: #ffb80b;}

    
    /* ----- CHECKBOX ---- */
    .checkbox-wrapper { margin: .5rem 0;}

    form input[type="checkbox"] {
      all: unset; 
      display: inline-block;
      position: relative;

      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      max-width: 22px !important;

      flex: 0 0 22px !important;
      box-sizing: border-box;

      border: 1px solid #bbb;
      border-radius: 6px;
      background-color: #fff;

      cursor: pointer;
      margin-right: 10px;
       transition: .2s ease all;
      -moz-transition: .2s ease all;
      -webkit-transition: .2s ease all;
    }

    /* checked state */
    form input[type="checkbox"]:checked {
      background-color: #ffb80b;
      border-color: #ffb80b;
    }
    /* checkmark */
    form input[type="checkbox"]:checked::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;

      width: 4px;
      height: 8px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: translate(-50%, -60%) rotate(45deg);
    }

    /* layout */
    form .checkbox-wrapper .input-checkbox {
      display: flex;
      align-items: center;
      line-height: 1;
      cursor: pointer;
    }


    /* ---- ERROR STATE ---- */
    form .radio-wrapper .pcv-form-error-message,
    form .checkbox-wrapper .pcv-form-error-message {
        float: none; 
        display: block; 
        padding-top: 5px;
    }
    form input[type="radio"].pcv-form-error,
    form.shop input[type="checkbox"].pcv-form-error {
        border-color: #E15257;
    }


    /* ----ERROR MESSAGE----- */
    form div:has(input.pcv-form-error, textarea.pcv-form-error) > .i-label,
    form .pcv-form-error-message{
        color: #E15257;
    }


    /* ------ TABLE ------ */
    .grid-list {
        display: grid;
        gap: 0; /* important: remove gaps */

        list-style: none;
        padding: 0;
        margin: 0 0 1rem 0;

        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden; 
    }
    .grid-list li {
        padding: 10px;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    
     /*two-colums*/
    .grid-list.two-colums li:nth-child(-n + 2) {background-color: #f4f4f4;}
    .grid-list.two-colums {grid-template-columns: repeat(2, 1fr);}
    .grid-list.two-colums li:nth-child(2n) {border-right: none;}
    .grid-list.two-colums li:nth-last-child(-n + 2) {border-bottom: none;}

     /*three-colums*/
    .grid-list.three-colums li:nth-child(-n + 3) {background-color: #f4f4f4;}
    .grid-list.three-colums {grid-template-columns: repeat(3, 1fr);}
    .grid-list.three-colums li:nth-child(3n) {border-right: none;}
    .grid-list.three-colums li:nth-last-child(-n + 3) {border-bottom: none;}

    /*four-colums*/
    .grid-list.four-colums li:nth-child(-n + 4) {background-color: #f4f4f4;}
    .grid-list.four-colums {grid-template-columns: repeat(4, 1fr);}
    .grid-list.four-colums li:nth-child(4n) {border-right: none;}
    .grid-list.four-colums li:nth-last-child(-n + 4) {border-bottom: none;}

    /*five-colums*/
    .grid-list.five-colums li:nth-child(-n + 5) {background-color: #f4f4f4;}
    .grid-list.five-colums {grid-template-columns: repeat(5, 1fr);}
    .grid-list.five-colums li:nth-child(5n) {border-right: none;}
    .grid-list.five-colums li:nth-last-child(-n + 5) {border-bottom: none;}

    /*six-colums*/
    .grid-list.six-colums li:nth-child(-n + 6) {background-color: #f4f4f4;}
    .grid-list.six-colums {grid-template-columns: repeat(6, 1fr);}
    .grid-list.six-colums li:nth-child(6n) {border-right: none;}
    .grid-list.six-colums li:nth-last-child(-n + 6) {border-bottom: none;}


    /*grid-list light */
    .grid-list.light {
        border: none;
        border-bottom: 1px solid #ddd; 
        border-radius: none;
    }
    .grid-list.light li {
        padding: 10px 0;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    /* grid-list light first row */
    .grid-list.light li:nth-child(-n + 2),
    .grid-list.light li:nth-child(-n + 3),
    .grid-list.light li:nth-child(-n + 4),
    .grid-list.light li:nth-child(-n + 5),
    .grid-list.light li:nth-child(-n + 6){
        background: none !important; 
        font-family: 'Roboto_Medium','Helvetica','Arial',sans-serif;
        border-bottom: 2px solid #ddd;
        
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* pushes content to bottom */
     }
    
    /*first colum more space */
    .grid-list.first-2fr {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    }
    /*font small */
    .grid-list.small li {font-size: .9rem;}
    
    
    /*RESP FORM*/
    @media only screen and (max-width: 1440px) { }
	@media only screen and (max-width: 1280px) { }
	@media only screen and (max-width: 1024px) { }
    @media only screen and (max-width: 960px) { }
	@media only screen and (max-width: 850px) { }
	@media only screen and (max-width: 766px) { }
	@media only screen and (max-width: 599px) { }
	@media only screen and (max-width: 480px) {	}