/* Set the global variables for everything. Change these to use your own fonts/colours. */
:root {

    /* Set sans-serif & mono fonts */
    --sans-font: "Oswald"
    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  
    /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
    --base-fontsize: 1rem;
  
    /* Major third scale progression - see https://type-scale.com/ */
    --header-scale: 1.25;
  
    /* Line height is set to the "Golden ratio" for optimal legibility */
    --line-height: 1.618;

    --site-content-width: 68rem;
    /* Formular*/
    --inputs-font-size: 1rem;
    --inputs-height: 2.8rem;
    --inputs-padding: 0.8rem;
    --inputs-border-width: 0px;
    --inputs-text-color: #931419;

    /* Default (light) theme */
    --bg: #FFF;
    --primary: #46403c;
    --secondary: #bbbbbb;
    --gruen:#79814f;
    --gruen-dark:#4e5333;
    --text: #212121;
    --text-light: #585858;
    --border: #D8DAE1;
    --braun:#46403c;
    --braun-light:#59524c;
    --produkt-bg:#f2f1f0;
    --content-bg-hell:#f2f1f0;
    --anfahrt-bg:#F8F9FA;
  }
 
  /* latin */
@font-face {
  font-family: 'UnifrakturMaguntia';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UnifrakturMaguntia.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Aclonica';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/aclonica.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(../fonts/raleway-thin100.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/raleway-regular400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/raleway-semibold600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/raleway-bold700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    src: url(../fonts/material.woff2) format('woff2');
  }  

 
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Raleway';
}
body, html{
    height: 100%;
    color:var(--braun);
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    font-family: 'Aclonica', sans-serif;
    transition: 0.3s;
}
h1,.h1{
    font-size: 2.5vw;
    line-height: 1.2;
    letter-spacing: 0em;
    margin-bottom: 0.8rem;
}
h1.weiss{
    color: #ffffff;
}
h5,.h5 {
    font-size: 1.2rem;
}

p{
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-size:var(--base-fontsize);
    color:#46403c;
    margin-bottom: 0.5rem;
}
a.link-text {
    color: inherit;
    font-weight: 600;
}

header{
    height: 60px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
section {
    padding-top: calc(100vw/18);
    padding-bottom: calc(100vw/14);
    height: 100%;
}
.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.container {
    max-width: var(--site-content-width);
    position: relative;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.start{
    background-image: url(/images/layout/header2-ohne.jpg);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 10vh;
    transition: 0.4s;
}
.start h1{
    text-align: left;
    font-size: 10vw;
    margin-left: 10vw;
    font-family: 'UnifrakturMaguntia', sans-serif;
}
.start h1.brennerei{
    color: #f5eab8;
    
}
.start h1.sellendorf{
    color: #ec931d;
}
.jugendschutz {
    padding: 2rem;
    text-align: center;
    background-color: #dadada;
}
.jugendschutz>h5{
    display: inline-block;
    margin-bottom: 1rem;
}
.jugendschutz button{
    padding: 1rem 2rem;
    margin-left: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}
.jugendschutz a{
    text-decoration: none;
}
.jugendschutz button.ja{
    background-color: rgb(0, 157, 0);
    color: #212121;
    font-family: 'Aclonica', sans-serif;
    transition: 0.3s;
    font-size: 1.2em;
}
.jugendschutz button.ja:hover{
    background-color: rgb(0, 92, 0);
    color: #ffffff;
}
.jugendschutz button.nein{
    background-color: rgb(195, 0, 0);
    color: #212121;
    font-family: 'Aclonica', sans-serif;
    transition: 0.3s;
    font-size: 1.2em;
}
.jugendschutz button.nein:hover{
    background-color: rgb(126, 0, 0);
    color: #ffffff;
}
.schade{
    background-image: url(/images/layout/header2-ohne.jpg);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 15vh;
    padding-left:10vw;
}
.schade>h1{
    color: #ec931d;
    font-size: 10vw;
}
.schade>p{
    color: #f5eab8;
}
.schade button{
    padding:1rem 2rem;
    background-color: transparent;
    border: thin solid #f5eab8;
    border-radius: 5px;
    margin-top: 2rem;
    color:#f5eab8;
    font-size: 1rem;
    transition: 0.2s;
    cursor: pointer;
}
.schade button:hover{
    background-color:#f5eab8 ;
    color:#46403c;
}
section#landgut, 
section#produkte, 
section#produkt,
section#landvergnuegen,
section#kaufanfrage{
    position: relative;
    padding-top: 170px;
    min-height: 100vh;
}
.landgut, .landwirtschaft{
    background-image: url(../images/layout/getreide-vintage.jpg);
    background-repeat: no-repeat;
    position: absolute;
    background-size: cover;
    background-attachment: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.flex{
    display: flex;
}
.flex-wrap{
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    gap: 5px;
}

.box-ws {
    background-color: #ffffffe3;
    padding: 1.5rem;
    gap: 30px;
    flex-wrap: wrap;
}

.box-ws-produkte {
    background-color:#f2f1f0;
    padding: 1.5rem;
    gap: 30px;
    flex-wrap: wrap;
}
.text-1-4{
    flex-grow: 1;
    flex-basis: 10%;
    max-width: 100%;
}
.text-2-4{
    flex-grow: 4;
    flex-basis: 10%;
    max-width: 100%;
}
.text-3-4{
    flex-grow: 4;
    flex-basis: 50rem;
    max-width: 100%;
    gap: 2rem;
}
.subtext-1-4{
    flex-grow: 1;
    flex-basis: 10%;
    max-width: 100%;
}
.subtext-3-4{
    flex-grow: 4;
    flex-basis: 50rem;
    max-width: 100%;
}

img.landgut-image, img.landwirtschaft-image{
    max-width: 187px;
}

.dlg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3rem;
    transition: 0.3s;
}
.dlg img {
    width: 20%;
    height: 20%;
}
.urkunde{
    max-width: 12vw;
}
.siegel {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 30px;
    align-items: center;
}
section#geschichte{
    position: relative;
    background-color: #cdcbc9;
}
section#hofladen{
    position: relative;
    background-color: #cdcbc9;
    padding-top: 130px;
    padding-bottom: 0;
}
section#anfahrt{
    position: relative;
    background-color: var(--anfahrt-bg);
    padding-top: 170px;
}
.ul-geschichte {
        list-style: circle;
        font-family: raleway;
        margin: 20px;
}
section#landwirtschaft {
    position: relative;
}
section#nachhaltigkeit{
    position: relative;
    background-color: #cdcbc9;;
}
.zertifikate {
    margin: 30px 0;
}
.zertifikate img {
    /* height: calc(100vw/2.5); */
    margin-bottom: calc(100vw/27);
    max-height: 215px;
}
section#produkt{
    background-color: var(--produkt-bg);
}

button.btn-gruen {
    width: 100%;
    border: none;
    padding: 15px;
    margin-top: 20px;
    background-color: var(--gruen);
    transition: all 0.3s;
}
button.btn-gruen p{
    margin-bottom: 0;
    color: var(--produkt-bg);
}
button.btn-gruen:hover{
    background-color: var(--gruen-dark);
    cursor: pointer;
}
a.link-btn-gruen {
    background-color: var(--gruen-dark);
    border: none;
    color: var(--produkt-bg);
    font-size: 16px;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
a.link-btn-gruen:hover{
    background-color: var(--produkt-bg);
    border: thin solid var(--gruen-dark);
    color: var(--gruen-dark);
}
button.btn-braun {
    width: 100%;
    border: none;
    padding: 15px;
    margin-top: 20px;
    background-color: var(--braun);
    transition: all 0.3s;
}
button.btn-braun p{
    margin-bottom: 0;
    color: var(--produkt-bg);
}
button.btn-braun:hover{
    background-color: var(--gruen-dark);
    cursor: pointer;
}

button.btn-weiss {
    width: 100%;
    border: none;
    padding: 15px;
    margin-top: 20px;
    background-color: var(--produkt-bg);
    transition: all 0.3s;
    color: var(--braun);
    font-size: var(--base-fontsize);
}
button.btn-weiss p{
    margin-bottom: 0;
    color:  var(--braun);
}
button.btn-weiss p:hover{
    color:var(--produkt-bg);
}
button.btn-weiss:hover{
    background-color: var(--gruen-dark);
    cursor: pointer;
    color: var(--produkt-bg);
    
}

@media (max-width:600px) {
    h1,.h1{
        font-size:6vw;
    }
}

@media (max-width:450px) {
    .container{
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .box-ws{
        padding: 0.5rem;
    }
    .box-ws .bestellung fieldset {
        padding: 0.5rem;
    }
    section#hofladen{
        padding-top: 85px;
    }
    section#landgut, 
    section#produkte, 
    section#produkt, 
    section#landvergnuegen, 
    section#kaufanfrage {
        padding-top: 120px;
    }
}

.refresh-captcha{
    cursor: pointer;
    width: 30px;
    transition: 250ms ease-in-out;
}
.refresh-captcha:hover{
    width: 32px;
    transform: rotate(-90deg);
}

.back-to-top {
    background: transparent;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    height: 2rem;
    width: 2rem;
    text-align: center;
    border-radius: 50%;
  }
  a.back-to-top{
    text-decoration: none;
    color: #bbbbbb;
  }

  .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    font-size: 32px !important;
  }