@charset "UTF-8";
/**
 *   Farbengrundtöne
 */
/*
  * Farben verwendung
  */
/**
  *   Schriften
  */
/**
  *  Schriftgrößen
  */
/**
  * grid
  */
.freydlform .fortschritt [type="submit"][disabled] {
  display: block; }

.bestellheadline span {
  display: block; }
  .bestellheadline span.headline1 {
    margin-bottom: 1rem; }
  .bestellheadline span.headline4:last-child {
    margin-bottom: 3rem;
    margin-top: 0; }

.freydlform.schritt1 {
  margin: 2rem 0; }
  .freydlform.schritt1 .form-row {
    justify-content: center; }
@media (max-width: 60rem) {
  .freydlform.schritt2 .produkteliste .entferneprodukt {
    margin-top: 1rem; } }
.freydlform.schritt2 .produkteliste .produktpreis {
  font-size: 22px;
  /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
  font-size: 1.32rem;
  display: inline-block;
  margin-left: 1rem;
  font-family: "JosefinSans", "Segoe UI", Helvetica, "Trebuchet MS", Roboto, sans-serif;
  font-style: normal;
  font-weight: bold; }
  @media (min-width: 60.063em) {
    .freydlform.schritt2 .produkteliste .produktpreis {
      width: 6rem; } }
  @media (max-width: 60rem) {
    .freydlform.schritt2 .produkteliste .produktpreis {
      margin-top: 1rem; } }
.freydlform.schritt2 .produkteliste .mengenangabetext {
  font-size: 18px;
  /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
  font-size: 1.08rem;
  padding-left: 0.5rem;
  padding-right: 2rem;
  margin-top: 0.65rem; }
@media (min-width: 60.063em) {
  .freydlform.schritt2 .produkteliste .form-row {
    margin-left: 1rem; } }
.freydlform.schritt2 .weitereprodukt {
  margin-top: 2rem;
  justify-content: center; }
  .freydlform.schritt2 .weitereprodukt label {
    font-size: 22px;
    /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
    font-size: 1.32rem;
    font-family: "JosefinSans", "Segoe UI", Helvetica, "Trebuchet MS", Roboto, sans-serif;
    font-style: normal;
    font-weight: bold;
    margin-bottom: 0.5rem; }
  @media (max-width: 47.95rem) {
    .freydlform.schritt2 .weitereprodukt select {
      width: 100%; } }
  .freydlform.schritt2 .weitereprodukt select option[disabled].hideopt {
    display: none; }
.freydlform.schritt2 fieldset {
  border-bottom: 1px solid var(--cifarbe1);
  padding-bottom: 1rem;
  padding-top: 3rem; }
  .freydlform.schritt2 fieldset:nth-child(even) {
    background: #fff; }
  .freydlform.schritt2 fieldset .bestelloptionen {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    @media (max-width: 60rem) {
      .freydlform.schritt2 fieldset .bestelloptionen {
        flex-wrap: wrap;
        justify-content: center; } }
  .freydlform.schritt2 fieldset .entferneprodukt {
    justify-self: flex-end;
    display: flex;
    margin-top: 1rem; }
    @media (max-width: 60rem) {
      .freydlform.schritt2 fieldset .entferneprodukt {
        justify-self: center; } }
  @media (min-width: 48rem) {
    .freydlform.schritt2 fieldset legend {
      width: 35%;
      max-width: 15rem; } }
  @media (max-width: 47.95rem) {
    .freydlform.schritt2 fieldset legend {
      width: 100%; } }
  .freydlform.schritt2 fieldset legend .produktname {
    font-size: 22px;
    /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
    font-size: 1.32rem;
    font-family: "JosefinSans", "Segoe UI", Helvetica, "Trebuchet MS", Roboto, sans-serif;
    font-style: normal;
    font-weight: bold; }
  .freydlform.schritt2 fieldset .form-row {
    justify-content: flex-start;
    display: flex;
    margin-bottom: 0;
    flex-wrap: wrap;
    align-items: flex-start; }
    @media (min-width: 48rem) {
      .freydlform.schritt2 fieldset .form-row {
        width: calc(100% - 35% - 6rem); } }
    @media (max-width: 47.95rem) {
      .freydlform.schritt2 fieldset .form-row {
        width: 100%;
        justify-content: center;
        margin-top: 1rem; } }
    .freydlform.schritt2 fieldset .form-row .geschnitten {
      display: flex;
      flex-wrap: wrap; }
      @media (max-width: 47.95rem) {
        .freydlform.schritt2 fieldset .form-row .geschnitten {
          margin-top: 0.5rem;
          width: 100%;
          justify-content: center; } }
    .freydlform.schritt2 fieldset .form-row input {
      width: 3rem;
      text-align: right; }
    .freydlform.schritt2 fieldset .form-row input[type=number]::-webkit-inner-spin-button {
      opacity: 1; }
.freydlform.schritt2 .gesamtpreis {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cifarbe1);
  font-family: "JosefinSans", "Segoe UI", Helvetica, "Trebuchet MS", Roboto, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
  font-size: 1.44rem; }
.freydlform.schritt3 input[type=number]::-webkit-inner-spin-button {
  opacity: 0; }
.freydlform.schritt3 .kontaktdaten {
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap; }
.freydlform.schritt3 .sonstiges .form-row {
  display: block; }
  .freydlform.schritt3 .sonstiges .form-row textarea {
    width: 100%;
    height: 10rem; }
@media (min-width: 48rem) {
  .freydlform.schritt3 .flex .form-row {
    display: grid;
    grid-template-columns: 2fr 1fr; } }
@media (min-width: 48rem) {
  .freydlform.schritt3 .flex {
    display: flex; }
    .freydlform.schritt3 .flex > * {
      flex-basis: 50%; } }
.freydlform.schritt4 .flexcontainer {
  margin-top: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 19px;
  /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
  font-size: 1.14rem;
  line-height: 140%; }
  @media (min-width: 48rem) {
    .freydlform.schritt4 .flexcontainer {
      display: flex; } }
  .freydlform.schritt4 .flexcontainer > * {
    flex-basis: 47%; }
  .freydlform.schritt4 .flexcontainer .headline2 {
    font-size: 27px;
    /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
    font-size: 1.62rem; }
.freydlform.bestellung fieldset {
  padding: 2rem 1rem;
  max-width: 45rem;
  margin: 1rem auto 1.5rem;
  border: 1px solid var(--cifarbe1); }
  .freydlform.bestellung fieldset legend {
    padding-left: 1rem;
    padding-right: 1rem; }
  .freydlform.bestellung fieldset .form-row {
    display: grid;
    grid-template-columns: 1fr 2fr; }
  .freydlform.bestellung fieldset textarea {
    align-self: stretch; }
  .freydlform.bestellung fieldset #paypal-button-container {
    min-width: 15rem; }
  .freydlform.bestellung fieldset.zahlung {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem; }
    .freydlform.bestellung fieldset.zahlung > div .form-row {
      margin: auto;
      display: flex;
      justify-content: center; }
      @media (max-width: 47.95rem) {
        .freydlform.bestellung fieldset.zahlung > div .form-row {
          flex-wrap: wrap; } }
      @media (min-width: 48rem) {
        .freydlform.bestellung fieldset.zahlung > div .form-row .buttonlink {
          margin-left: 1.5rem; } }
    .freydlform.bestellung fieldset.zahlung > div label {
      display: flex;
      width: 100%;
      align-items: center;
      flex-wrap: wrap; }
      .freydlform.bestellung fieldset.zahlung > div label .kleinertext {
        display: inline-block; }
.freydlform.bestellung .form-row {
  width: 100%; }
  .freydlform.bestellung .form-row input {
    flex-grow: 2; }
.freydlform.bestellung label {
  flex-grow: 1;
  font-size: 18px;
  /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
  font-size: 1.08rem;
  line-height: 160%; }

@media (max-width: 47.95rem) {
  .zusammenfassung {
    margin-top: 2.5rem; } }
.zusammenfassung .produkteliste {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem; }
  .zusammenfassung .produkteliste .right {
    margin-left: 1rem;
    min-width: 6rem;
    text-align: right; }
.zusammenfassung .eintrag {
  padding: 1rem;
  background: #dee5de; }
  .zusammenfassung .eintrag:after {
    content: "";
    display: block;
    clear: both; }
  .zusammenfassung .eintrag:nth-child(even) {
    background: #edf0ed; }
  .zusammenfassung .eintrag .left {
    float: left;
    width: 80%;
    display: inline-block; }
  .zusammenfassung .eintrag .right {
    float: right; }
.zusammenfassung .preiscontainer {
  text-align: right;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--cifarbe1);
  border-bottom: 1px solid var(--cifarbe1); }
.zusammenfassung .gesamtsumme {
  font-weight: bold;
  font-size: 22px;
  /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
  font-size: 1.32rem;
  text-align: right;
  padding-top: 1.5rem; }
.zusammenfassung .buttonlink {
  margin-top: 2rem; }

.fortschritt {
  display: flex;
  border: 1px solid var(--cifarbe1);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem; }
  @media (max-width: 47.95rem) {
    .fortschritt {
      flex-wrap: wrap; } }
  .fortschritt .schritt {
    padding: 1.5rem 1rem;
    display: block;
    flex-grow: 1; }
    @media (max-width: 47.95rem) {
      .fortschritt .schritt {
        flex-wrap: wrap; } }
    .fortschritt .schritt:first-child, .fortschritt .schritt:last-child {
      flex-grow: 3; }
    .fortschritt .schritt.active {
      background: #fff;
      color: #0d4411; }
  .fortschritt a, .fortschritt button {
    color: #fff;
    display: block;
    background: var(--cifarbe1);
    text-decoration: none;
    box-shadow: inset 0 0 0 10px transparent;
    transition: all 300ms ease-in-out; }
    .fortschritt a:hover, .fortschritt a:focus, .fortschritt button:hover, .fortschritt button:focus {
      box-shadow: inset 0 0 0 5px var(--cifarbe1);
      background: #fff;
      color: var(--cifarbe1); }
  .fortschritt span {
    font-style: italic;
    filter: grayscale(0.5);
    background: #d0dad0;
    color: #040404; }

.paypallsuccess {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; }
  .paypallsuccess.hidden {
    display: none; }
  .paypallsuccess .text {
    background: #fff;
    padding: 4rem 2rem;
    width: 70vw;
    font-size: 30px;
    /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
    font-size: 1.8rem; }