/* Fonts */

/* roboto-100 - 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: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../webfonts/roboto-v48-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-100italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../webfonts/roboto-v48-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-200 - 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: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('../webfonts/roboto-v48-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-200italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 200;
  src: url('../webfonts/roboto-v48-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - 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: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../webfonts/roboto-v48-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../webfonts/roboto-v48-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-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: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../webfonts/roboto-v48-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-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: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/roboto-v48-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../webfonts/roboto-v48-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-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: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/roboto-v48-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('../webfonts/roboto-v48-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-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: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/roboto-v48-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../webfonts/roboto-v48-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800 - 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: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../webfonts/roboto-v48-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 800;
  src: url('../webfonts/roboto-v48-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - 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: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../webfonts/roboto-v48-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('../webfonts/roboto-v48-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chewy-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: 'Chewy';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/chewy-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* Allgemeines Layout */

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-image: url('../img/bg-aquarell.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  color: #000; /* ggf. anpassen für besseren Kontrast */
}

h1 {
  font-size: 2.5rem;
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .1px;
  color: #389138;
  text-shadow: 1px 1px 4px #fff;
}

h2,.aktion-number {
  font-family: "Chewy", system-ui;
}

p {  
  font-size: 1.2rem;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  letter-spacing: .1px;
  color: #3b3b3b;
  text-shadow: #fff 1px 0 10px;
}

ul {  
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  letter-spacing: .1px;
  color: #3b3b3b;
}

a {
  color: #389138;
}

p a:hover {
  color: #389138;
}

.main-container {
  max-width: 1920px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}


#bipa-logo {
  width: 30%;
  max-width: 130px;
  margin-top: 0;
  margin-right: 10%;
}

img.frosch-baby-logo{
  width: 400px;
}

/* Sonne oben links, pendelnde Rotation */
.sun-animation {
  position: absolute;
  top: 0;
  left: 5%;
  width: 25%; /* ggf. anpassen */
  min-width: 250px;
  height: auto;
  z-index: -1;
  animation: rotateSwing 4s ease-in-out infinite;
  transform-origin: center;
  pointer-events: none; /* Klicks durchlassen */
}

/* Keyframes für Pendelbewegung */
@keyframes rotateSwing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(3deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* Hintergrund-Container für die Wolken */
.clouds-background {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -3; /* ganz hinten im Hintergrund */
  pointer-events: none;
}

/* Gemeinsamer Stil für alle Wolken */
.cloud-mix-1 {
  position: absolute;
  top: 30%; /* vertikale Position – anpassbar */
  width: 400px;
  height: auto;
  opacity: 0.7;
  animation-timing-function: linear;
}

.cloud-mix-2 {
  position: absolute;
  top: 60% !important; /* vertikale Position – anpassbar */
  width: 400px;
  height: auto;
  opacity: 0.6;
  animation-timing-function: linear;
}

/* Wolke 1 – langsame, große Schleife */
.cloud-1 {
  animation: cloudMove 150s linear infinite;
  left: -250px;
  max-width: 500px;
  min-width: 200px;
  width: 25%;
}

/* Wolke 2 – schneller, andere Höhe */
.cloud-2 {
  animation: cloudMove 80s linear infinite;
  margin-top: 350px;
  left: 250px;
  opacity: 0.7;
  max-width: 400px;
  min-width: 200px;
  width: 20%;
}

/* Wolke 3 – langsame, große Schleife */
.cloud-3 {
  animation: cloudMove 120s linear infinite;
  top: 50%;
  left: -250px;
}

/* Wolke 4 – schneller, andere Höhe */
.cloud-4 {
  animation: cloudMove 60s linear infinite;
  top: 80%;
  left: -300px;
  opacity: 0.3;
  width: 300px;
}


/* Animation von links nach rechts */
@keyframes cloudMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(120vw);
  }
}

/* Zentrierte Abschnitte */
section {
  padding: 30px 20px;
}

section.no-padding {
  padding: 0px 30px !important;
}

/* Footer Links */
footer a {
  color: #333;
  margin: 0 10px;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .logo {
    max-height: 60px;
  }

  section {
    padding: 30px 10px;
  }

  form .form-group {
    margin-bottom: 15px;
  }

  footer .container {
    flex-direction: column;
    align-items: center;
  }

  footer a {
    display: block;
    margin: 5px 0;
  }
}

@media (max-width: 576px) {
  .logo {
    max-height: 50px;
  }

  h1, h2 {
    font-size: 1.5rem;
  }

  p, li {
    font-size: 0.95rem;
  }
}

.btn-primary {
    border: 2px white;
    background-color: #389138;
    font-family: Helvetica,sans-serif;
    -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out;
    transition: color .2s ease-in-out,background-color .2s ease-in-out;
}

.btn-primary:hover {
    background-color: #389138;
    border: 2px solid #389138;
}


/* Zurück nach oben Button */
#backToTop {
  display: none; /* Standard: versteckt */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #389138;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
  width: 50px;
  height: 50px;
  padding: 0;
}

#backToTop:hover {
  background-color:  #2d742d;
}



/* Verspieltes, kinderfreundliches Formular-Design */
form {
  background-color: rgba(255, 255, 255, 0.75);
  padding: 2rem;
  border-radius: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Input-Felder größer und abgerundet */
.form-control {
  font-size: 1.1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid #389138;
  transition: all 0.3s ease;
  background-color: white;
}

/* Input-Feld Fokus-Effekt */
.form-control:focus {
  border-color: #2e7b2b;
  box-shadow: 0 0 10px rgba(56, 145, 56, 0.3);
}

/* Dateiupload anpassen */
.form-control-file {
  font-size: 1rem;
  padding: 0.5rem;
  color: #389138;
}

/* Checkboxen */
.form-check-input {
  transform: scale(1.3);
  margin-right: 0.5rem;
}

.form-check-label {
  font-size: 1rem;
  color: #333;
}

/* Absenden-Button */
.btn-primary {
    border: 2px solid #389138;
    border-bottom-left-radius: 23px;
    border-top-right-radius: 23px;
    color: #389138;
    display: inline-block;
    font-family: Helvetica,sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.3;
    padding: 13px 22px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    background-color: white;
    -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out;
    transition: color .2s ease-in-out,background-color .2s ease-in-out;
    word-break: break-word;
}

.btn-primary:hover {
  background-color: #2e7b2b;
}

/* Spacing verbessern bei kleinen Viewports */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 1rem;
  }
}


/* Titel */
.aktion-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #389138;
}

/* Einzelschritte */
.aktion-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
  text-align: left;
}

/* Nummern im Kreis */
.aktion-number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background-color: #389138;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Beschreibungstext */
.aktion-step p {
  font-size: 1.1rem;
  color: #333;
  margin: 0;
}

/* Hintergrund (optional) */
.aktion-section {
  background-color: rgba(255, 255, 255, 0.75);
  padding: 2rem;
  border-radius: 1.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* Responsive */
@media (max-width: 576px) {
  .aktion-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .aktion-number {
    margin-bottom: 0.5rem;
  }
}

/* Aktiver Schritt (z. B. aktueller Status im Ablaufplan) */
.aktion-step.active-step {
  padding: 1rem 0rem;
  border-radius: 0.75rem;
  position: relative;
  z-index: 1;
}

/* Animierter Glow-Effekt (optional, verspielt) */
.aktion-step.active-step::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  border-radius: 1rem;
  background: rgba(56, 145, 56, 0.1);
  z-index: -1;
  animation: pulse 2s infinite;
}

/* Keyframes für den sanften Glow */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(56, 145, 56, 0.3);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(56, 145, 56, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(56, 145, 56, 0);
  }
}


/* Container-Position muss relativ sein */
.aktion-step {
  position: relative;
}

/* Frosch zeigt nach links, ist etwas über dem Schritt positioniert */
.frosch-pointer {
  position: absolute;
  right: -130px; /* passt du je nach Bildgröße an */
  top: 0;
  width: 200px; /* größenabhängig anpassbar */
  pointer-events: none; /* verhindert, dass das Bild klickbar ist */
}

/* Bei kleineren Screens Frosch ausblenden oder anders positionieren */
@media (max-width: 900px) {
  .frosch-pointer {
    display: none; /* alternativ: positionieren oberhalb des Steps */
  }
}

/* Wrapper für Checkboxen + Button */
.form-extra {
  text-align: left;
  margin-top: 1.5rem;
}

/* Optional: Leichter Abstand zwischen Checkboxen und Button */
.form-extra .form-check {
  margin-bottom: 0.75rem;
}

/* Zentrierter Abschnitt mit ähnlichem Stil wie vorher */
.frosch-links-section {
  max-width: 600px;
}

/* Titel wie bei anderen Sektionen */
.frosch-links-section .aktion-title {
  color: #389138;
  margin-bottom: 1.5rem;
}

/* Liste als Buttons/Links gestaltet */
.frosch-links li {
  margin-bottom: 1rem;
}

.frosch-links a {
  display: inline-block;
  background-color: #389138;
  color: white;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-size: 1.1rem;
  font-weight: 500;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.frosch-links a:hover {
  background-color: #2e7b2b;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(56, 145, 56, 0.2);
}

.frosch-links a i {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  vertical-align: middle;
}

/* Wiesenbild */
.footer-wiese {
  margin-top: -150px;
  width: 100%;
  height: 400px; /* oder passend zur Bildhöhe */
  background-image: url('../img/hg_wiese.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  margin-bottom: -5px; /* optional: Bild schließt bündig an grünen Balken */
}

/* Grüner Footer-Bereich */
.footer-green {
  background-color: #389138;
  width: 100%;
  font-size: 0.95rem;
}

.footer-green a {
  color: #ffffff;
  margin: 0 0.75rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-green a:hover {
  text-decoration: underline;
  color: #edf5e2;
}


@media (max-width: 1000px) {
  .footer-wiese {
    margin-top: -300px;
  }
}


/* Allgemeine Butterfly-Stile */
.butterfly {
  position: fixed;
  z-index: 0; /* hinter dem Content */
  pointer-events: none; /* nicht klickbar */
  animation: flutter 3s ease-in-out infinite alternate;
  opacity: 0.8;
}

/* Individuelle Positionierung */
.butterfly-1 {
  top: 430px;
  left: 15%;
  animation-delay: 0s;
}

.butterfly-2 {
  top: 200px;
  right: 15%;
  animation-delay: 1s;
}

/* Flatternde Bewegung (leicht schwebend + rotierend) */
@keyframes flutter {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-10px) rotate(2deg) scale(1.02);
  }
  100% {
    transform: translateY(0px) rotate(-2deg) scale(1);
  }
}

/* Optional: Bildgröße anpassen */
.butterfly img {
  width: 50px; /* oder je nach Größe deiner Illustration */
  height: auto;
}


@media (max-width: 1000px) {
  .butterfly img {
    width: 50px; /* oder je nach Größe deiner Illustration */
    height: auto;
    opacity: 0.5;
  }
}

.impressum-box {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 800px;
  text-align: left;
}

.impressum-box h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.impressum-box p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

.alert {
  border: 2px solid red;
  background-color: white;
  padding: 10px;
  border-radius: 1rem;
}

.alert p{
  margin: 0px !important;
  color: red;
}

.form-check-label a:hover {
  color: #389138;
}

[name="joe-name"] {

    position: absolute;

    left: -9999px;

    top: -9999px;

    height: 0;

    width: 0;

    overflow: hidden;

    visibility: hidden;

  }