/* roboto-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/roboto-v32-latin_latin-ext-300.woff2') format('woff2'); 
}

/* roboto-300italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/roboto-v32-latin_latin-ext-300italic.woff2') format('woff2'); 
}

/* roboto-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-v32-latin_latin-ext-regular.woff2') format('woff2'); 
}

/* roboto-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-v32-latin_latin-ext-italic.woff2') format('woff2'); 
}

/* roboto-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-v32-latin_latin-ext-700.woff2') format('woff2'); 
}

/* roboto-700italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/roboto-v32-latin_latin-ext-700italic.woff2') format('woff2'); 
}

/* roboto-900 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/roboto-v32-latin_latin-ext-900.woff2') format('woff2'); 
}

/* roboto-900italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/roboto-v32-latin_latin-ext-900italic.woff2') format('woff2'); 
}

/* ======================================================== */

body {
	font-family: 'Roboto';
	font-weight: 400;
}

.fvchg-iban-spacer {
    padding-left: 0.3rem;
}

.fvchg-hellblau {
    color:rgb(179, 202, 255);
}

.fvchg-font-serif {
	font-family: 'Roboto';
}

.fvchg-font-sans {
	font-family: 'Roboto';
}

.fvchg-footer {
    margin: 2em 0 0 0;
    font-family: 'Roboto';
    font-weight: 300;
    box-shadow: inset 0px 5px 6px #ccc;
    background-color: #fff;
    background-image: linear-gradient(180deg, #eee 0%, #fff 40%);
}

h1, h2, h3, h4 {
    font-family: 'Roboto';
    font-weight: 700;
	font-variant: small-caps;
	letter-spacing: 0.1ex;
}

h1 {
    font-size: 1.75em;
    padding-bottom: 1em;
    background: linear-gradient(to right, #5b46ff, #00e09d 100%);
    background-position: 0 65%;
    background-size: 100% 3px;
    background-repeat: repeat-x;
}

h2 {
    font-size: 1.5em;
    padding: 1em 0 0.2em 0;
    position: relative;
}

h2::before {
    content: "";
    position: absolute;
    left: -0.4em;
    bottom: -0.4em;
    width: 1em;
    height: 2.4em;
    transform: skew(-8deg) translateX(-40%);
    background: linear-gradient(to bottom, #bdb4ff, #a6ffe4 100%);;
    z-index: -1;
}

h3 {
    font-size: 1.25em;
    padding: 1em 0 0.2em 0;
}

h4 {
    font-size: 1.1em;
    padding: 1em 0 0.2em 0;
}

header {
    background-image: url('/img/fotos/mosaik-sonne.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 8em; width: 100%;
    margin: 8px 0 1.5rem 0;
}

#satzung ol,
#satzung ul {
	padding-left: 1.5em;
}

#satzung ul li,
#satzung ol li {
	padding: 0.5em 0 0.5em 1em;
}

#satzung ul li::marker,
#satzung ol li::marker {
	font-weight: 700;
}

#mitgliedsantrag_form > div {
	padding-top: 1.2em;
}

#mitgliedsantrag_form > div > div + div {
	padding-left: 1em;
}

#mitgliedsantrag_form input[type=text],
#mitgliedsantrag_form input[type=email] {
	padding: 0.2em 0.5em;
	border-radius: 0.1em;
	border: 1px solid #bdb4ff;
	box-shadow: 1px 1px 1px #bdb4ff;
	width: 75%;
}


/* CSS für Slider */
/* Quelle: https://codepen.io/saheeranas/pen/jgmzxJ */

.range_wrapper {
  display: flex; 
  /* justify-content: center; */
  justify-content: left;
  align-items: center;
  background: #fff;
  /* padding: 20px 15px; */
  padding-bottom: 1.2em;
  border-radius: 10px;
}
input[type=range] {
  height: 34px;
  -webkit-appearance: none;
  margin: 10px 0; 
  /*width: 500px;*/
  width: 70%;
  /*max-width: 95%;*/
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #000000;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000031;
  border: 1px solid #00001E;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -13px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #000000;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #000000;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000031;
  border: 1px solid #00001E;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #000000;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #000000;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 1px #000031;
  border: 1px solid #00001E;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #000000;
}
input[type=range]:focus::-ms-fill-upper {
  background: #000000;
}
.slideBeitrag {
  width: 30px;
  margin-left: 15px;
  text-align: center;
  font-weight: bold;
}

/* Ende des CSS für Slider */