body {
  font-family: 'Inter', sans-serif;
  background: #f9fafb;
  color: #1f2937;
  margin: 0;
  padding: 0;
  transition: background 0.3s, color 0.3s;


   background-image: url("sunflowers-7658040_1920.jpg");
  background-size: cover; /* Oder andere Optionen wie contain, auto, etc. */
  background-attachment: fixed; /*  Optional: Hintergrundbild fixieren */
 /* opacity: 0.5; /* Transparenz einstellen */
  z-index: -1; /* Hintergrundelement unter den Inhalten */
}

header {
  background-color: #ffffff;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

header h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
}

#toggle-dark {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

main {
  padding: 2rem;
  max-width: 1000px;
  margin: auto;
}

.current-weather {
  text-align: center;
  margin-bottom: 2rem;
}

.weather-icon {
  font-size: 4rem;
}

.temperature {
  font-size: 2rem;
  font-weight: 600;
}

.details {
  margin-top: 1rem;
  font-size: 0.95rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  color: #4b5563;
}

.forecast {
  text-align: center;
}

.forecast-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 100px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
}

.card .icon {
  font-size: 2rem;
}

/*Tageswerte*/

.forecast-tw {
  text-align: center;
}

.forecast-cards-tw {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.card-tw {
    
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 79px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.card-tw:hover {
  transform: translateY(-4px);
}

.card-tw .icon-tw {
  font-size: 2rem;
}


.forecast-wb {
/*flex: 1 2em auto;*/
  text-align: center;
}

.forecast-cards-wb {
  display: flex;
  justify-content: center;
flex-wrap: nowrap;
  gap: 1rem;
  margin-top: 1rem;
}


.card-wb {
/*flex: 1 2em auto;*/
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
  text-align: justify;
}

.card-wb:first-child {
/*background: #4b5563*/
}
.card-wb:last-child {
     /*margin-top: 1rem;*/
/*background: #f3f4f6;*/
}

.card-wb:hover {
  transform: translateY(-4px);
}

.card-wb .icon-wb {
  font-size: 2rem;
}


/*Wetterbericht */

.forecast-wb-wb {
/*flex: 1 2em auto;*/
  text-align: center;
}

.forecast-cards-wb-wb {
  display: flex;
  justify-content: center;
flex-wrap: nowrap;
  gap: 1rem;
  margin-top: 1rem;
}


.card-wb-wb {
/*flex: 1 2em auto;*/
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
  text-align: justify;
}
.card-wb-wb:only-child {
width: 100%;
}

.card-wb-wb:first-child {
/*background: #4b5563*/
}
.card-wb-wb:last-child {
     /*margin-top: 1rem;*/
/*background: #f3f4f6;*/
}

.card-wb-wb:hover {
  transform: translateY(-4px);
}

.card-wb-wb .icon-wb-wb {
  font-size: 2rem;
}


/*Wetter aktuell */

.forecast-wb-wc {
/*flex: 1 2em auto;*/
  text-align: center;
  
}
.forecast-wb-wc-temp-text {
font-size: 2rem;
  font-weight: 600;

}

.forecast-cards-wb-wc {
  display: flex;
  justify-content: center;
flex-wrap: nowrap;
  gap: 1rem;
  margin-top: 1rem;
}


.card-wb-wc {
/*flex: 1 2em auto;*/
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
  text-align: justify;
}

.forecast-wb-wc-temp-text {
font-size: 2rem;
  font-weight: 600;
  text-align: center;

}

.forecast-wb-wc-temp-text-small {
font-size: 0.8rem;
  /*font-weight: 600;*/
  text-align: center;

}
.card-wb-wc:only-child {
width: 100%;
}

.card-wb-wc:first-child {
/*background: #4b5563*/
}
.card-wb-wc:last-child {
     /*margin-top: 1rem;*/
/*background: #f3f4f6;*/
}

.card-wb-wc:hover {
  transform: translateY(-4px);
}

.card-wb-wc .icon-wb-wc {
  font-size: 8rem;
}



/*Wetterwarnung */

.forecast-wb-ww {
/*flex: 1 2em auto;*/
  text-align: center;
}

.forecast-cards-wb-ww {
  display: flex;
  justify-content: center;
flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}


.card-wb-ww {
/*flex: 1 2em auto;*/
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
  text-align: justify;
}
.card-wb-ww:only-child {
width: 100%;
}

.card-wb-ww:first-child {
/*background: #4b5563*/
}
.card-wb-ww:last-child {
     /*margin-top: 1rem;*/
/*background: #f3f4f6;*/
}

.card-wb-ww:hover {
  transform: translateY(-4px);
}

.card-wb-ww .icon-wb-wb {
  font-size: 2rem;
}

/*Wetter Vorabinformationen */

.forecast-wb-wv {
/*flex: 1 2em auto;*/
  text-align: center;
}

.forecast-cards-wb-wv {
  display: flex;
  justify-content: center;
flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}


.card-wb-wv {
/*flex: 1 2em auto;*/
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
  text-align: justify;
}
.card-wb-wv:only-child {
width: 100%;
}

.card-wb-wv:first-child {
/*background: #4b5563*/
}
.card-wb-wv:last-child {
     /*margin-top: 1rem;*/
/*background: #f3f4f6;*/
}

.card-wb-wv:hover {
  transform: translateY(-4px);
}

.card-wb-wv .icon-wb-wb {
  font-size: 2rem;
}

/*Wetterlage */

.forecast-wb-wl {
/*flex: 1 2em auto;*/
  text-align: center;
}

.forecast-cards-wb-wl {
  display: flex;
  justify-content: center;
flex-wrap: nowrap;
  gap: 1rem;
  margin-top: 1rem;
}


.card-wb-wl {
/*flex: 1 2em auto;*/
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
  text-align: justify;
}

.card-wb-wl:only-child {
width: 100%;
}

.card-wb-wl:first-child {
/*background: #4b5563*/
}
.card-wb-wl:last-child {
     /*margin-top: 1rem;*/
/*background: #f3f4f6;*/
}

.card-wb-wl:hover {
  transform: translateY(-4px);
}

.card-wb-wl .icon-wb-wl {
  font-size: 2rem;
}


.card-wb-wl, 
.card-wb-wv,
.card-tw,
.card-wb-wb,
.card-wb-ww, 
.card,
.card-wb,
.card-wb-wc,
.product-card-wb-wv
{ opacity:0.8; }


footer {
  text-align: center;
  padding: 1rem;
  background-color: #ffffff;
  margin-top: 2rem;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}


.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card-a {
    /*display: inline-block;*/
    flex: 0 0 auto;

    background-color: red;
    width: 100px;
    height: 100px;
    float: none;
    display: inline-block;
  }
}

.scrollmenu {
    width: 100%;
    height: fit-content;

    /**used to scroll text*/
    white-space: nowrap;    
    overflow-x: scroll;
    overflow-y: hidden;
    /**keep scrolling when
      *finger or cursor scrolling*/
    -webkit-overflow-scrolling: touch; 
}
.product-card {
    background-color: red;
    width: 100px;
    height: 100px;
    float: none;
    display: inline-block;
}
/*to hide the scrollbars*/
::-webkit-scrollbar {
    display: none;
}



.forecast-sm-wb-wv {
  text-align: center;
}

.forecast-sm-cards-wb-wv {
  display: flex;
  justify-content: center;
flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}



.scrollmenu-wb-wv {
    width: 100%;
    height: fit-content;

    /**used to scroll text*/
    white-space: nowrap;    
    overflow-x: scroll;
    overflow-y: hidden;
    /**keep scrolling when
      *finger or cursor scrolling*/
    -webkit-overflow-scrolling: touch; 
}
.product-card-wb-wv {
    /*flex: 1 2em auto;*/
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
  text-align: center;

    width: 100px;
    /*height: 100px;*/
    float: none;
    display: inline-block;
}

.product-card-wb-wv:hover {
  transform: translateY(-4px);
}


.icon-product-card-wb-wv  {
  font-size: 2rem;
}
/*to hide the scrollbars*/
::-webkit-scrollbar {
    display: none;
}





body.dark {
  background: #111827;
  color: #f3f4f6;
}

body.dark header {
  background-color: #1f6967;
}

body.dark footer {
  background-color: #008c95;
}

body.dark .card, 
body.dark .card-wb-ww, 
body.dark .card-wb-wl, 
body.dark .card-wb-wb, 
body.dark .card-wb,
body.dark .card-tw,
body.dark .card-wb-wv,
body.dark .card-wb-wc,

body.dark .product-card-wb-wv{
  background: #004f59;
}

body.dark .details {
  color: #7fb232;
}