:root {

  --primary: #4f8f52;

  --primary-hover: #3f7842;

  --primary-focus: rgba(79, 143, 82, .25);

  --primary-inverse: #ffffff;

  --gold: #c9a646;

  --dark: #142918;

  --muted: #5f705e;

  --soft: #f5faf2;

}





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

   Basis

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



html {

  scroll-behavior: smooth;

}



body {

  background:

    radial-gradient(

      circle at top right,

      rgba(201, 166, 70, .15),

      transparent 28%

    ),

    linear-gradient(

      180deg,

      #f7fbf5 0%,

      #ffffff 45%,

      #fff8ea 100%

    );



  color: var(--dark);

}





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

   Navigation

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



nav.container-fluid {

  position: sticky;

  top: 0;

  z-index: 10;



  padding: .25rem 1rem;



  background: rgba(255,255,255,.9);

  backdrop-filter: blur(14px);



  border-bottom: 1px solid rgba(79,143,82,.1);

}



nav.container-fluid > ul {

  margin: 0;

  padding: 0;

  align-items: center;

}



nav.container-fluid > ul > li {

  margin: 0;

  padding-top: 0;

  padding-bottom: 0;

}



.brand {

  display: flex;

  align-items: center;

  gap: .8rem;

  text-decoration: none;

}



.brand img {

  width: auto;

  height: 64px;

}



.brand strong {

  display: block;

  color: #284e2b;

  font-size: 1.05rem;

  line-height: 1;

}



.brand small {

  display: block;

  margin-top: .2rem;

  color: var(--gold);

  font-size: .72rem;

  letter-spacing: .08em;

  text-transform: uppercase;

}





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

   Hauptbereich

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



main.container {

  padding-top: 2rem;

  padding-bottom: 2rem;

}





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

   Hero

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



.hero {

  align-items: center;

  gap: 2rem;

  margin-bottom: 0;

}



.hero > section {

  margin-bottom: 0;

}



.hero-copy {

  align-self: center;

}



.hero-logo {

  width: min(230px, 70%);

  margin-bottom: .8rem;

}





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

   Badge

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



.eyebrow {

  display: inline-block;



  padding: .35rem .8rem;



  border-radius: 999px;



  background: #e7f2e1;

  color: #315c34;



  font-size: .85rem;

  font-weight: 700;

  letter-spacing: .02em;



  white-space: nowrap;

}



.mobile-eyebrow {

  display: inline-block;

  margin-bottom: .6rem;

}



.desktop-eyebrow {

  display: none;

}





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

   Rechte Hero-Spalte

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



.hero-visual {

  display: block;

  margin-bottom: 0;

  padding-top: 0;

}





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

   Großer Desktop ab 1000px

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



@media (min-width: 1000px) {



  .mobile-eyebrow {

    display: none;

  }



  .hero-visual {

    display: flex;

    flex-direction: column;



    align-items: center;

    justify-content: center;



    align-self: center;



    margin-bottom: 0;

  }



  .desktop-eyebrow {

    display: inline-block;



    position: relative;



    transform: translateY(-2.4rem);



    margin-top: 0;

    margin-bottom: -1.4rem;



    z-index: 2;



    box-shadow:

      0 10px 28px rgba(49,92,52,.10);

  }

}





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

   Hero Typografie

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



h1,

h2,

h3 {

  color: #1e3d22;

}



.hero-copy h2 {

  margin-bottom: .8rem;



  color: #1f4724;



  font-size: clamp(1.5rem, 2.6vw, 2.8rem);



  line-height: 1.08;

  letter-spacing: -.02em;

}



.hero-copy h2 span {

  color: inherit;

  background: none;

  -webkit-text-fill-color: currentColor;

}



.lead {

  max-width: 680px;



  color: var(--muted);



  font-size: 1.12rem;

}





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

   Hero Buttons

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



.hero-actions {

  display: flex;

  flex-wrap: wrap;



  gap: .85rem;



  margin-top: 1.1rem;

  margin-bottom: 0;

}



.secondary-btn {

  background: transparent;

  border-color: #9dbb93;

  color: #315c34;

}





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

   Große Inhaltsbilder

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



figure {

  overflow: hidden;

  border-radius: 1.4rem;

}



figure img,

.hero-card img {

  display: block;



  width: 100%;

  min-height: 380px;



  object-fit: cover;



  border-radius: 1.4rem;



  box-shadow:

    0 24px 70px rgba(50,76,45,.15);

}



.hero-card {

  width: 100%;



  margin-top: 0;

  margin-bottom: 0;

}



figcaption {

  text-align: center;

  color: var(--muted);

}





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

   Feature Cards

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



.feature-cards {

  margin-top: 1.45rem;

}



.feature-cards article,

.section-card,

.product-card {

  border: 1px solid #e1eadc;



  background: rgba(255,255,255,.86);



  box-shadow:

    0 14px 40px rgba(68,95,62,.07);

}





/*

 * Einheitlicher Innenaufbau der vier Kästen

 */

.feature-cards article {

  display: flex;

  flex-direction: column;

  align-items: center;



  margin-top: 0;



  padding: 1.2rem 1rem;



  border-radius: 1.2rem;



  text-align: center;

}





/*

 * Icon -> Überschrift

 */

.icon {

  display: grid;

  place-items: center;



  width: 46px;

  height: 46px;



  margin: 0 auto .8rem;



  border-radius: 999px;



  background: #eef7ea;

  color: #315c34;



  font-size: 1.4rem;

}





/*

 * Gleiche Überschriften-Geometrie

 */

.feature-cards h3 {

  width: 100%;



  margin-top: 0;

  margin-bottom: .65rem;



  font-size: 1.15rem;

  line-height: 1.2;



  overflow-wrap: normal;

  word-break: normal;

  hyphens: none;

}





/*

 * Gleicher Textabstand in allen vier Kästen

 */

.feature-cards p {

  width: 100%;



  margin-top: 0;

  margin-bottom: 0;



  line-height: 1.45;

}





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

   Allgemeine Sektionen

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



.section-card {

  margin-top: 2rem;

  padding: 1.6rem;

  border-radius: 1.4rem;

}





/* Feature Cards -> Produktwelt */



#produkte {

  margin-top: .9rem;

  padding-bottom: 1.6rem;

}





/* Produktwelt -> Begleitung */



#ueber {

  margin-top: .9rem;

}



.centered {

  text-align: center;

}



/* =========================================================
   Produkte
   ========================================================= */

#produkte hgroup {
  margin-bottom: 1.4rem;
}

.products-grid {
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}

.product-card {
  overflow: hidden;

  margin-top: 0;
  margin-bottom: 0;

  border-radius: 1.2rem;
}

.product-card img {
  display: block;

  width: 100%;
  height: 245px;

  object-fit: cover;
}

.product-card .content {
  padding: 1.05rem;
}

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

   About / Begleitung

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



.about {

  align-items: center;

  gap: 1.4rem;

}



.about > section {

  margin-bottom: 0;

}



.about ul {

  margin-top: .7rem;

  margin-bottom: 0;

}



.about li {

  margin-bottom: .4rem;

}



.about li:last-child {

  margin-bottom: 0;

}





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

   Kontaktbereich

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



section[aria-label="Subscribe example"] {

  margin-top: 0 !important;

  margin-bottom: 0 !important;



  padding: 1.5rem 0 1.2rem;



  background:

    linear-gradient(

      135deg,

      #14331a 0%,

      #4e8147 65%,

      #c9a646 100%

    );



  color: white;

}



.contact-panel {

  margin: 0;



  padding: 1.6rem;



  border-radius: 1.5rem;



  background: rgba(255,255,255,.96);



  box-shadow:

    0 24px 70px rgba(0,0,0,.16);

}



.contact-summary {

  margin-top: 1rem;



  padding: 1.1rem;



  border: 1px solid #dce8d6;



  border-radius: 1.2rem;



  background:

    linear-gradient(

      135deg,

      #eff8ea 0%,

      #fffdf8 100%

    );

}



.contact-grid {

  display: grid;



  grid-template-columns:

    repeat(auto-fit, minmax(175px, 1fr));



  gap: .85rem;



  margin-top: .8rem;

}



.contact-link {

  display: flex;

  flex-direction: column;

  align-items: center;



  gap: .2rem;



  padding: .9rem;



  text-align: center;

  text-decoration: none;



  border: 1px solid #e2eadf;

  border-radius: 1rem;



  background: white;

  color: #315c34;



  box-shadow:

    0 10px 24px rgba(68,95,62,.06);

}



.contact-link span {

  display: grid;

  place-items: center;



  width: 38px;

  height: 38px;



  border-radius: 999px;



  background: #17391d;

  color: var(--gold);



  font-size: 1.1rem;

  font-weight: 800;

}



.contact-link small {

  color: var(--muted);



  overflow-wrap: anywhere;

}





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

   Footer

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



body > footer.container {

  display: flex !important;



  align-items: center !important;

  justify-content: center !important;



  box-sizing: border-box !important;



  width: 100% !important;

  max-width: none !important;



  height: 2.2rem !important;

  min-height: 2.2rem !important;



  margin: 0 !important;



  padding: 0 .75rem !important;



  text-align: center !important;

}



body > footer.container small {

  display: block !important;



  width: 100% !important;



  margin: 0 !important;

  padding: 0 !important;



  text-align: center !important;



  line-height: 1 !important;

}



body > footer.container a {

  margin: 0 !important;

  padding: 0 !important;

}





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

   Tablet / kleinere Auflösungen

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



@media (max-width: 999px) {



  .desktop-eyebrow {

    display: none;

    transform: none;

  }



  .mobile-eyebrow {

    display: inline-block;



    margin-bottom: .6rem;



    white-space: normal;

  }



  .hero-visual {

    display: block;



    padding-top: 0;

  }





  /*

   * Bei schmaleren Zwischenbreiten etwas kompakter,

   * damit lange Begriffe sauber bleiben.

   */

  .feature-cards h3 {

    font-size: 1.08rem;

  }

}





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

   Mobile

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



@media (max-width: 768px) {



  nav.container-fluid {

    position: static;

    display: block;



    padding: .3rem .8rem .45rem;

  }



  nav.container-fluid > ul {

    margin: 0;

    padding: 0;

  }



  nav.container-fluid ul:last-child {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;



    gap: .3rem .6rem;



    margin-top: .25rem;

  }



  nav.container-fluid li {

    margin: 0;

  }



  .brand {

    justify-content: center;

  }



  .brand img {

    height: 52px;

  }





  main.container {

    padding-top: 1rem;

    padding-bottom: 1.5rem;

  }





  .hero {

    gap: 1rem;

    margin-bottom: 0;

  }



  .hero > section {

    margin-bottom: 0;

  }



  .hero-logo {

    margin-bottom: .6rem;

  }





  .hero-copy h2 {

    margin-bottom: .7rem;



    font-size: 1.55rem;

    line-height: 1.12;

    letter-spacing: -.015em;

  }





  .hero-actions {

    margin-top: .9rem;

    margin-bottom: 0;

  }



  .hero-actions a {

    width: 100%;

  }





  .hero-card {

    margin-top: 0;

    margin-bottom: 0;

  }





  .feature-cards {

    margin-top: 1.2rem;

  }



  .feature-cards article {

    margin-top: 0;



    padding: 1.1rem;

  }



  .feature-cards h3 {

    margin-bottom: .55rem;



    font-size: 1.1rem;

  }



  .feature-cards p {

    line-height: 1.4;

  }





  .section-card {

    margin-top: 1.4rem;

    padding: 1.1rem;

  }





  #produkte {

    margin-top: .8rem;

    padding-bottom: 1.1rem;

  }





  #produkte hgroup {

    margin-bottom: .4rem;

  }





  .products-grid {

    gap: .8rem;



    margin-top: 0;

    margin-bottom: 0;

  }





  .product-card {

    margin-bottom: 0;

  }





  #ueber {

    margin-top: .8rem;

  }





  .about {

    gap: 1rem;

  }





  .about > section {

    margin-bottom: 0;

  }





  .about ul {

    margin-top: .6rem;

    margin-bottom: 0;

  }





  .about li:last-child {

    margin-bottom: 0;

  }





  section[aria-label="Subscribe example"] {

    margin-top: 0 !important;

    margin-bottom: 0 !important;



    padding: 1rem 0 .9rem;

  }





  .contact-panel {

    margin: 0;

    padding: 1.1rem;

  }





  figure img,

  .hero-card img {

    min-height: 280px;

  }





  body > footer.container {

    height: 2rem !important;

    min-height: 2rem !important;



    margin: 0 !important;



    padding: 0 .6rem !important;

  }

}





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

   Kleine Smartphones

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



@media (max-width: 480px) {



  nav.container-fluid {

    padding: .25rem .6rem .4rem;

  }



  nav.container-fluid ul:last-child {

    gap: .25rem .5rem;



    margin-top: .2rem;



    font-size: .9rem;

  }



  .brand img {

    height: 46px;

  }



  .brand strong {

    font-size: .95rem;

  }



  .brand small {

    margin-top: .15rem;

    font-size: .65rem;

  }





  .hero-copy h2 {

    font-size: 1.45rem;

    line-height: 1.14;

  }





  .feature-cards {

    margin-top: 1.1rem;

  }



  .feature-cards article {

    padding: 1rem;

  }



  .feature-cards h3 {

    font-size: 1.05rem;

    line-height: 1.2;

  }





  #produkte {

    margin-top: .7rem;

    padding-bottom: 1.1rem;

  }



  #produkte hgroup {

    margin-bottom: .35rem;

  }





  #ueber {

    margin-top: .7rem;

  }



  .about ul {

    margin-top: .55rem;

    margin-bottom: 0;

  }





  section[aria-label="Subscribe example"] {

    margin-top: 0 !important;

    margin-bottom: 0 !important;



    padding: .9rem 0 .8rem;

  }





  body > footer.container {

    height: 1.9rem !important;

    min-height: 1.9rem !important;



    margin: 0 !important;



    padding: 0 .5rem !important;

  }

}





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

   Dark Mode

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



@media (prefers-color-scheme: dark) {



  nav.container-fluid {

    background: rgba(24,27,23,.94);



    border-bottom-color:

      rgba(201,166,70,.16);

  }



  .brand strong {

    color: #cfe7c7;

  }



  .brand small {

    color: var(--gold);

  }





  .hero-copy h2 {

    color: #5f8f63;

  }



  .hero-copy h2 span {

    color: inherit;

    background: none;

    -webkit-text-fill-color: currentColor;

  }





  .lead {

    color: #d7ddd4;

  }





  .eyebrow {

    background: #17391d;

    color: #cfe7c7;

  }





  .secondary-btn {

    color: #d9ead3;

    border-color: #6f9468;

  }





  figcaption {

    color: #b8c4b4;

  }

}



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

   Temporärer Logo-Test

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



.logo-test {

  padding-top: 1.5rem;

  padding-bottom: 1.5rem;

}



.logo-test h2 {

  text-align: center;

  margin-bottom: 1rem;

}



.logo-test-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 1rem;

}



.logo-test figure {

  margin: 0;

  padding: 1rem;



  background: rgba(255,255,255,.9);



  border: 1px solid #e1eadc;

  border-radius: 1rem;



  text-align: center;

}



.logo-test img {

  display: block;



  width: 100%;

  height: 180px;



  object-fit: contain;



  margin: 0 auto;

}



.logo-test figcaption {

  margin-top: .6rem;



  font-size: .85rem;

  color: var(--muted);

}





/* Dark Mode */



@media (prefers-color-scheme: dark) {



  .logo-test figure {

    background: rgba(255,255,255,.06);

    border-color: rgba(255,255,255,.12);

  }



  .logo-test figcaption {

    color: #b8c4b4;

  }

}