@charset "UTF-8";
/*
**
** Statische Styles fuer IG Bio-Feldgemüse
** Erstellt: 25.06.2026
** agntur-emme.de - Werbeagentur Emme, D-34414 Warburg
**
*/
/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v44-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* open-sans-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/open-sans-v44-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* open-sans-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/open-sans-v44-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* open-sans-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/open-sans-v44-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
:root {
  --menuebg: #006e45;
  --menufontcolor: #e4efd8;
  --fontcolor: #515151;
  --hellgrau: #e4efd8;
  --h3color: #57ab27;
  --psize: 18px;
  --h1size: 40px;
  --h2size: 32px;
  --h3size: 32px;
  --lisize: 18px; }

body {
  font-family: 'Open Sans';
  color: var(--fontcolor);
  font-weight: 400; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  text-align: left; }

h4,
h5,
h6,
strong {
  font-size: calc(var(--psize)*0.8);
  text-align: left;
  font-weight: 500; }

h1 {
  font-size: calc(var(--h1size)*0.8);
  color: var(--menuebg); }

h2 {
  font-size: calc(var(--h2size)*0.8);
  color: var(--menuebg); }

h3 {
  font-size: calc(var(--h3size)*0.8);
  color: var(--h3color); }

p {
  font-size: calc(var(--psize)*0.8);
  text-decoration: none;
  -ms-hyphens: manual;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  hyphens: manual; }

a {
  font-size: calc(var(--psize)*0.8);
  text-decoration: none;
  -ms-hyphens: manual;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  hyphens: manual;
  color: var(--menuebg); }

li {
  font-size: calc(var(--lisize)*0.8); }

ul li::marker {
  color: var(--h3color); }

.mit-klammer {
  list-style: none;
  counter-reset: liste;
  /* Exakter Bootstrap-Einzug für den Text-Start */
  padding-left: 2rem; }

.mit-klammer li {
  counter-increment: liste;
  display: flex;
  margin-bottom: 8px; }

.mit-klammer li::before {
  content: counter(liste,lower-alpha) ") ";
  min-width: 25px;
  flex-shrink: 0;
  margin-right: 4px;
  /* Zieht den Buchstaben nach links, damit er exakt unter den runden Punkten steht */
  margin-left: -25px; }

.card {
  margin-bottom: 30px; }

.zitate {
  font-family: merriweather, serif;
  text-align: center; }

.autor {
  text-align: center;
  color: var(--hellgrau);
  font-size: 16px; }

.logoheader {
  margin-top: 30px;
  margin-bottom: 30px; }
  .logoheader p {
    text-align: center; }
  .logoheader img {
    max-width: 80%; }

.menuheader {
  background: var(--menuebg); }
  .menuheader a {
    color: var(--menufontcolor);
    text-decoration: none; }
  .menuheader a:hover {
    color: white;
    text-decoration: none; }

.kopfbild p {
  text-align: center; }
.kopfbild img {
  max-width: 100%; }

.kopfbildbeschriftung {
  position: relative;
  width: fit-content;
  padding: 30px;
  background: var(--hellgrau);
  margin-bottom: 30px; }
  .kopfbildbeschriftung h1 {
    font-size: 26px; }
  .kopfbildbeschriftung p {
    font-size: 16px;
    text-align: center; }

.teaserwrapper {
  background: var(--hellgrau);
  padding-top: 20px;
  padding-bottom: 20px; }
  .teaserwrapper .teaserheadline {
    padding-top: 30px;
    padding-bottom: 30px; }
  .teaserwrapper h2 {
    background: var(--menuebg);
    color: var(--menufontcolor);
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px; }

.trenner p {
  text-align: center; }
.trenner .zitate {
  position: relative; }
.trenner img {
  max-width: 100%; }

#leistungen .leistungenheadline {
  padding-top: 30px;
  padding-bottom: 30px; }
#leistungen .block {
  column-count: 1;
  background: var(--hellgrau);
  padding: 20px;
  margin-bottom: 30px; }
#leistungen .blockhead {
  background: var(--hellgrau);
  padding-top: 15px; }
  #leistungen .blockhead h1 {
    margin-bottom: 0; }

.uebermichwrap {
  background: var(--hellgrau);
  padding-bottom: 30px; }
  .uebermichwrap .blockhead {
    padding-top: 30px;
    padding-bottom: 30px; }
  .uebermichwrap .block {
    background: white;
    padding-top: calc(var(--bs-gutter-x) * .5); }
  .uebermichwrap p.zitat {
    font-family: merriweather, serif;
    margin-bottom: 0; }
  .uebermichwrap p.autor {
    text-align: left;
    font-size: calc(var(--psize) * 0.8);
    color: var(--fontcolor); }
  .uebermichwrap img {
    max-width: 100%; }

#ablauf {
  margin-top: 30px; }
  #ablauf h1 {
    padding-top: 30px;
    padding-bottom: 30px; }
  #ablauf .ablauftext {
    padding: 30px;
    background: var(--hellgrau); }
    #ablauf .ablauftext p {
      text-align: center; }
    #ablauf .ablauftext a {
      color: var(--fontcolor); }
    #ablauf .ablauftext a:hover {
      color: white;
      text-decoration: none; }

#kontaktformular {
  margin-top: 30px;
  background: var(--hellgrau);
  padding-top: 30px; }
  #kontaktformular h1 {
    padding-top: 15px;
    padding-bottom: 15px; }
  #kontaktformular input {
    background: white;
    margin-bottom: 25px;
    border: none;
    text-align: center; }
    #kontaktformular input.eingabefeld {
      width: 100%;
      height: 40px; }
    #kontaktformular input.knopf {
      padding: 10px;
      width: auto; }
  #kontaktformular p, #kontaktformular a {
    color: var(--fontcolor);
    text-decoration: none;
    text-align: center; }
  #kontaktformular a:hover {
    color: white; }

.fussmenue {
  background: var(--menuebg);
  margin-top: -10px;
  padding-top: 15px;
  padding-bottom: 5px; }
  .fussmenue p, .fussmenue a {
    color: white;
    font-weight: 500;
    text-align: center; }
  .fussmenue a:hover {
    color: var(--hellgrau); }

.dsgvoimpressum {
  margin-top: 40px; }
  .dsgvoimpressum h1, .dsgvoimpressum h2, .dsgvoimpressum h3, .dsgvoimpressum p, .dsgvoimpressum a {
    text-align: left;
    margin-bottom: 15px; }

.bestaetigung {
  padding-top: 30px;
  padding-bottom: 30px; }
  .bestaetigung h1, .bestaetigung h2, .bestaetigung h3, .bestaetigung p, .bestaetigung a {
    text-align: center; }

@media (min-width: 768px) {
  #leistungen .block p {
    text-align: justify; } }
@media (min-width: 992px) {
  h4,
  h5,
  h6,
  strong {
    font-size: var(--psize); }

  h1 {
    font-size: var(--h1size); }

  h2 {
    font-size: var(--h2size); }

  p,
  a {
    font-size: var(--psize); }

  li {
    font-size: var(--psize); }

  .kopfbildbeschriftung {
    top: -350px;
    margin-bottom: -150px;
    width: fit-content;
    padding: 30px;
    background: rgba(255, 255, 255, 0.8); }
    .kopfbildbeschriftung h1 {
      font-size: var(--h1size); }
    .kopfbildbeschriftung p {
      font-size: var(--psize);
      text-align: center; }

  .trenner .zitate {
    top: -320px; }

  #leistungen .block {
    column-count: 2;
    column-gap: 40px;
    padding: 30px;
    margin-bottom: 40px; }
  #leistungen .blockhead {
    padding-top: 15px; }
    #leistungen .blockhead h1 {
      margin-bottom: 0; } }
@media (min-width: 1200px) {
  .trenner .zitate {
    top: -390px;
    margin-bottom: -50px; } }
@media (min-width: 1600px) {
  .trenner .zitate {
    top: -500px; } }
@media (min-width: 1920px) {
  .trenner .zitate {
    top: -600px; }

  .kopfbild img {
    max-width: 1920px; } }